Rails6에서 FontAwesome 소개 및 표시

소개

이번에는 원래 앱에 FontAwesome을 도입했습니다.
Rails6에서는 Webpacker라는 패키지를 사용합니다.

FontAwesome은 아이콘을 쉽게 도입할 수 있다는 것입니다.
이번 내 원래 앱에서는 좋아하는 기능 구현으로 좋아하는 버튼
에 사용했습니다.



도입하면 왼쪽 아래와 같은 아이콘을 사용할 수 있습니다.

도입 절차

먼저 yarn을 사용하여 FontAwesome을 설치합니다.

% brew install yarn
% yarn add @fortawesome/fontawesome-free

다음으로 JavaScript와 Stylesheets에서 FontAwesome을 읽는 설명을 추가합니다.

application.js

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

application.scss

 $fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

이 기본값은 'application.css'이므로 'application.scss'로 이름을 바꿉니다.

여기에서 도입은 완료입니다.

표시 방법

우선, FontAwesome의 공식 사이트 에서 사용하고 싶은 아이콘을 찾습니다.



이때 왼쪽 중간에 Free 란에 체크를 하는 것을 잊지 마세요! !

사용하려는 아이콘 페이지로 이동하여 복사합니다.



그리고는, 사용하고 싶은 곳에 붙이기만 합니다.

 <%= link_to  post_post_like_path(post, post.post_likes), {class: "like-link", method: :delete } do %>
      <i class="fas fa-grin-squint-tears unlike-btn"></i>
 <% end %>

link_to에 do를 붙여 ~end로 둘러싸는 것에 의해, 좋아 버튼으로 구현할 수 있습니다.

나는 도입시, free 이외에서 선택해 버려 잘 표시되지 않는다고 하는 트러블이 있었습니다.
그 이외의 도입은 원활하게 갔다.

free의 것만으로도 많은 아이콘이 있으므로 매우 편리했습니다! !

초보자 때문에 무언가가 없을 수 있습니다.
그 때는 코멘트 주시면 다행입니다.

참고 링크는 아래의 문헌입니다.
htps : // / ch ch ch ぢ 아. 코 m / 흠 t 아우 소메 라이 ls6 /