FontAwesome을 haml에 도입할 때 막힌 이야기

Twitter나 Facebook등의 링크용의 아이콘으로서 자주(잘) 사용되는 FontAwesome이지만, 이번은 이것을 Rails 어플리케이션에 도입하는 방법을 기술해 간다.

FontAwesome 사이트

htps : ///후타타우우소메. 코m/
이 사이트에서 이용한다. Pro와 붙어 있는 것은 유료이지만, 그 이외이면 무료로 사용할 수 있다.

전제

Rails에 FontAwesome를 소개하는 방법으로 2가지 있다.
젬 'font-awesome-rails'를 사용하거나 gem 'font-awesome-sass'를 이용할 것인가?
의 두 종류.

FontAwesome을 도입할 수 있다는 점에서는 변하지 않지만, 차이로서는,
'font-awesome-rails'에서는 fa_icon, fa_stacked_icon의 2종류의 헬퍼 메소드를 사용할 수 있지만, 최신판의 font-awesome5에 대응하고 있지 않다
'font-awesome-sass'에서는 상기 2종류의 헬퍼 메소드를 사용할 수 없지만, 최신판의 font-awesome5를 이용할 수 있다

라는 것.
오류는 나오지 않지만 표시되지 않는다고 생각하면 font-awesome-rails에서 font-awesome5 아이콘을 사용하려고했습니다.
또한 fa_icon이나 fa_stacked_icon을 사용하고 있는데 undefined method와 화가 났을 경우는 font-awesome-sass를 사용하고 있다는 점에 주의하자.

먼저 결론을 말하면

gem 'font-awesome-sass'를 사용합시다. 새로운 아이콘도 사용하고 싶을 것입니다.
아래에 기술하지만, fa_icon을 사용할 수 없는 것만으로 다른 기술로 사용할 수 있으므로.

도입 절차(font-awesome-sass)

이번에는 예로 book을 소개한다.

① gem을 기술한다

Gemfile

gem 'font-awesome-sass', '~> 5.4.1'

②bundle install을 실시한다

$ bundle install #bundleでも可

③application.scss에 다음을 추가

application.scss

@import 'font-awesome-sprockets';
@import 'font-awesome';

④ 실제로 사용할 수 있는지를 확인한다.

= icon("fas", "book")

fontawesome 에서는 <i class="fas fa-book"></i> 라고 기술되고 있어 그것을 상기에 넣는 것으로 이용 가능하다.

절차(font-awesome-rails)

일단 이쪽도 기술한다.
① 아래의 gem을 Gemfile에 기술한다.

Gemfile

gem "font-awesome-rails"

②bundle install을 실시한다

터미널

$ bundle install #bundleでも可

③application.scss에서 다음을 추가한다.

application.scss

@import 'font-awesome-sprockets';
@import 'font-awesome';

여기까지는 같다. 사용법이 조금 전과 다르다.

= fa_icon 'book'

총평

지금까지는 그다지 깊이 생각하지 않았지만, qiita의 기사 중에서도 font-awesome-sass를 넣으면서도 fa_icon을 사용하는 기사가 있어, 거기서 조금 막혔다.
스스로 검증하고 있기 때문에 이번 내용에 차이는 아마 없다고는 생각하지만, 그 밖에도 쓰는 방법은 있다고 생각한다.
틀리면 지적해 주시면 기꺼이 땅 밑좌석합니다.