소개

포트폴리오 아이콘에 font-awesome을 사용해 보았습니다.
브라우저에 의해 표시되는 아이콘과 표시되지 않는 아이콘이 있었다.

chrome : 표시 할 수 없습니다

safari : 잘 표시된다

인터넷 기사에서 정보를 수집하고 해결책을 시도해 보는 것도 잘하지 않았습니다.
공식 페이지에서 표시 아이콘 유형을 터치하면
원인을 알았으므로 정리해 둔다.

사용 기술

rails (6.1.4)

루비 (2.7.3)

OS (Mac Catalina_10.15.7)

Rail6 or Rail5

Rails의 버전에 따라 설정 방법이 다르므로 주의한다.

· Rails6 : 패키지 관리 도구 yarn을 통해 설치
・Rails5: gemfile에 대상 gem을 기입해, bundler 경유로 인스톨 한다

font-awesome의 도입【Rails6】

먼저 yarn을 통해 font-awesome을 설치합니다.

터미널

% yarn add @fortawesome/fontawesome-free

설치된 font-awesome을 JavaScript, scss에 로드합니다.

app/javascript/packs/application.js

〜〜省略〜〜

import '@fortawesome/fontawesome-free/js/all';

app/assets/stylesheets/application.scss

〜〜省略〜〜

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

이것만으로 도입 완료!

원인?

원래 Pro(有料版)で使用が保証されているfont-awesome6 (Beta版)를 선택했습니다.

완전하게 공식 페이지를 날려 읽고 있던 결과로 자업 자득. 웃음

하지만 Beta版 중 일부 아이콘은
잘 표시되었으므로 결국에는 확증이 없다.

font-awesome 화면

사용할 아이콘을 찾으면



이것을 rails 뷰 (HTML 파일)에 붙여 넣습니다.

넘버: 사용자 정의

〇〇.html.erb

# サイズ変更
<i class="fas fa-bookmark　fa-2x"></i>
                              ↑ 数字を変更
# カラー変更
<i class="fas fa-apple-alt fa-5x" style="color:#7cfc00;"></i>

# アイコンを重ねる
<div class="fa-stack fa-5x">
  <i class="fas fa-mobile-alt fa-stack-2x"></i>
  <i class="fas fa-align-justify fa-stack-1x fa-inverse" style="color:#ddd;"></i>
</div>

참고 기사

끝에

CircleCI 도입시 RSpec 테스트에서 font-awesome이 요인의 에러가 발생했기 때문에
다시 한번 font-awesome 도입 방법을 조사하면,
rails5와 rails6의 설치 방법을 병기하고 있는 것을 깨달았다.

거기에서 rails6 사양에 코드를 통일해 명령을 실행하면
CircleCI도 작동했기 때문에 계기로
이전에 올렸던 당기사를 수정했다.

끝까지 읽어 주셔서 감사합니다.