【Rails】Font Awesome의 도입 방법

개발 환경



· Ruby : 2.5.7
·Rails: 5.2.4
·Vagrant: 2.2.7
· VirtualBox : 6.1
· OS : macOS Catalina

계정 생성



1. 아래 링크에 액세스한다.
Font Awesome Start 화면

2. 이메일 주소를 입력하고 "Send Kit Code"를 클릭합니다.


3. 확인 메일이 닿으므로 「Click to Confirm Your Email Address + Set Things Up」라고 하는 링크에 액세스한다.

4. 아래 화면으로 이동하므로 비밀번호를 입력하고 "Set Password & Continue"를 클릭합니다.


5. 프로필 정보 입력 화면으로 전환하지만, 지금은 특별히 설정할 필요도 없기 때문에,
아무것도 입력하지 않고 "All set.Let's Go!"를 클릭하십시오.


6. 아래의 화면으로 이동하므로 "Copy Kit Code"를 클릭하여 코드를 복사합니다.


Rails 측 조작



1. application.html.slim 편집



방금 복사한 코드를 붙여 Slim 형식으로 변환한다.

application.html.slim
doctype html
html
  head
    title
      | Font Awesomeテスト
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    / 追記
    script src='https://kit.fontawesome.com/c51513dd6c.js' crossorigin='anonymous'

2. 아이콘 표시



①아래 사이트에 접속하여 사용하고 싶은 아이콘을 클릭한다.
Font Awesome Icon 목록

② 아래와 같은 화면으로 천이하므로 클래스명을 복사한다.


③아래와 같이 HTML에 기술하면 아이콘이 표시됩니다.

~html.slim
i.far.fa-heart

좋은 웹페이지 즐겨찾기