💎 실현하고 싶은 일

이와 같이, 2개의 아이콘을 Gem font-awesome-rails 로 오른쪽에 배치하고 싶다.

⚠️ 표시되지 않는 패턴

　　
1, 이번 고전한 현상으로, 아무것도 표시되지 않습니다.

가능한 원인 패턴은
・아이콘의 ​​기술 방법, 지정 방법이 잘못되어 있다.
· font-awesome 버전
　

2, 이쪽은, 표시되었지만 아이콘이 나오지 않는다.

· 많은 경우는 css에서 font-famiry를 지정 할 수 없습니다.
・그 외 일부, css로 지정할 필요가 있다. (공식 참조)

문제가 발생한 환경

・Mac
・rails(5.0.7.2)
・haml(5.1.2)
· gem "font-awesome-rails"(4.7.0.5)

전제

・문법이 잘못되어 있는지 확인합시다, 몇 패턴 쓸 수 있는 방법이 있습니다.
・bundle install과 서버의 재시작 등도 재검토합시다.

현상 1

Gemfile에서 font-awesome-rails를 기재하고,

Gemfile

gem "font-awesome-rails"

bundle install 를 사용하여 application.scss에서 가져올 때 아무 것도 표시되지 않습니다.

index.html.haml

%ul.side-header__box__menu
  %li.side-header__box__menu__new-group
    =link_to "#" do
      = fa_icon 'edit', class: "fa fa-edit"
  %li.side-header__box__menu__edit-user
    =link_to edit_user_path(current_user) do
      = fa_icon 'cog', class: "fa fa-cog"

Google 크롬의 검증 화면을 보면 class처럼 판정되고 있었습니다.

반영된 경우 ::before 가 표시됩니다.

::before 가 없는 경우, 기재 미스로 class로서 판정되고 있는 것 같습니다만,
호출할 수 없을 가능성이 높습니다.

원인을 규명하기 위해 먼저 head에 CDN을 삽입해 봅시다.
이것은 Gem을 사용하지 않고 URL에서 호출하는 느낌입니다.

application.html.haml

!!!
%html
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv":"Content-Type"}/
    // 追加する
    %link{href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel: "stylesheet"}

이제 표시되었습니다.
표시되지 않으면 쓰기가 잘못되었을 수 있습니다.


이것으로 아무것도 표시되지 않으면 bundle install 후에,
서버를 재구성하지 않는 등을 의심해보십시오.

・Gem으로 표시시킨다

원인은 Gem으로 밝혀졌습니다.
버전에 따라 읽을 수 없을 가능성이 있습니다.
그래서 font_awesome의 다른 버전의 Gem을 사용해 보겠습니다.

이전 font-awesome-rails는 삭제합니다.
터미널에서
1, bundle exec gem uninstall font-awesome-rails 에서 Enter
2, Gemfile에서 삭제
3, bundle update 에서 Enter

· font_awesome5_rails 도입

Gemfile

gem 'font_awesome5_rails'

bundle install 를 실행한다.

다음으로, import를 기재합니다.

application.scss

@import 'font_awesome5_webfont';
@import 'font_awesome5.css';

　
그러면 호출하는 것이 성공했습니다.

현상 2

사각형의 상태는 호출할 수 있지만 표시가 잘되어 있지 않습니다.

· font-family 지정

SCSS 또는 CSS에서 아이콘에 대해 다음을 지정해야합니다.

font-family: "Font Awesome 5 Free";

　
이제 표시되었습니다.


이상으로 해결했습니다만, 그 밖에도 있으면,
코멘트 등으로 잘 부탁드립니다.
　

GitHub
htps : // 기주 b. 코 m / 아오카 t ぇ
🐦 Twitter
htps : // 라고 해서 r. 코 m / 아오카 t ぇ