Help us understand the problem. What is going on with this article?

【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」をクリックする。
1.png

3.確認メールが届くので「Click to Confirm Your Email Address + Set Things Up」というリンクにアクセスする。

4.下記画面に遷移するので、パスワードを入力して「Set Password & Continue」をクリックする。
image.png

5.プロフィール情報入力画面に遷移するが、今は特に設定する必要も無いので、
何も入力せずに「All set.Let's Go!」をクリックする。
image.png

6.下記画面に遷移するので、「Copy Kit Code」をクリックして、コードをコピーする。
image.png

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一覧

②下記の様な画面に遷移するので、クラス名をコピーする。
image.png

③下記の様にHTMLに記述するとアイコンが表示されます。

~html.slim
i.far.fa-heart
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away