【도해 있음】Rails6에서 Font Awesome을 이용해 SNS 아이콘을 표시시킨다

Rails6에서 애플리케이션에 Font Awesome을 도입했을 때의 순서를 정리해 보았습니다.
초초심자용입니다.

마지막: Rails6에 Bootstrap을 도입하여 톱 페이지 만들기 계속됩니다.


완성

Font Awesome 소개

콘솔

yarn add @fortawesome/fontawesome-free

Font Awesome 불러오기

app/javascript/packs/application.js

import 'bootstrap';
import '@fortawesome/fontawesome-free/js/all'; //追加
import '../stylesheets/application';

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; //追加

도입 완료

Font Awesome 보기

Font Awesome 공식 페이지 에서 임의의 아이콘 코드를 복사


index.html.erb

<i class="fab fa-twitter-square"></i>

표시되었지만 이것은 작습니다.
그래서 크기를 조정합니다.

아래 코드를 클래스 이름에 추가


코드
사이즈


fa-lg
1.3배

fa-2x
2배

fa-3x
3배

fa-4x
4배



index.html.erb

<i class="fab fa-twitter-square fa-2x"></i>

사이즈가 커졌습니다.
이 요령으로 기술해 갑니다.

index.html.erb

<div class="icons">
  <div class="icon">
    <%= link_to "#" do %>
      <span class="icon-twitter"><i class="fab fa-twitter-square fa-2x"></i></span>
      <span class="icon-name">Twitter</span>
    <% end %>
  </div>
  <div class="icon">
    <%= link_to "#" do %>
      <span class="icon-insta"><i class="fab fa-instagram-square fa-2x"></i></span>
      <span class="icon-name">Instagram</span>
    <% end %>
  </div>
  <div class="icon">
    <%= link_to "#" do %>
      <span class="icon-face"><i class="fab fa-facebook-square fa-2x"></i></span>
      <span class="icon-name">Facebook</span>
    <% end %>
  </div>
  <div class="icon"> 
    <%= link_to "#" do %>
      <span class="icon-line"><i class="fab fa-line fa-2x"></i></span>
      <span class="icon-name">Line</span>
    <% end %>
  </div>
</div>

CSS를 처리합니다. 아이콘의 색상은 이 사이트 을 참고로 하고 있습니다.

터미널

touch app/javascript/stylesheets/index.scss

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import './index.scss';　// 追記

app/javascript/stylesheets/index.scss

.icons{
  padding: 10px;
}

.icon{
  margin-bottom: 5px;
  :hover {
    text-decoration: none;
  }
}

.icon-name{
  font-size: 20px;
}

.icon-twitter{
  color: #55acee;
}

.icon-insta{
  color:#f77737;
}

.icon-face{
  color: #315096;
}

.icon-line{
  color: #00c300;
}

완성입니다.