0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Font Awesomeの登録方法

Posted at

はじめに

Font Awesomeのアイコンを使いと思ったのですが何かに登録しないといけない。。。

全部英語でどこからやればいいか分からない。。。

こんな状況に私自身なったので誰かの役に立てればと思い、投稿します

利用できるまでのステップ

  • 登録する(メールアドレス)

  • パスワードを決める

  • 指定された記述を

    タグ内に貼り付ける

この3点で利用できるようになります。

登録する

こちらがサイトになります。
まずはアクセスしましょう。

トップページに**start for free(無料で始める)**とあるのでこちらから新規登録します。

右は課金しなければ使えません。

スクリーンショット 2021-06-30 10.41.18(2).png

こちらにメールアドレスの入力するフォームがあるので自分のアドレスを入力して下さい。
入力後、send kit codeをクリックして終了です

スクリーンショット 2021-06-30 10.47.40(2).png

パスワードを決める

メールアドレスを設定したらそのアドレスにメールが届きます。

**click to confirm your email address + set things up(クリックすると、メールアドレスの確認と設定ができます。)**と書いてあるのでクリックします。

スクリーンショット 2021-06-30 10.52.04.png

パスワードを2回入力する画面に遷移するので自分のパスワードを決めます。

スクリーンショット 2021-06-30 11.02.53(2).png

入力後このような画面が出てきます。
もっとあなたの事を知りたい!と言われますが私は無視してしまいました。

ごめんよ。Font Awesomeさん・・・

スクリーンショット 2021-06-30 11.04.51(2).png

いよいよアイコンが利用できるようになります。

・・・の前に一点最後に記述する必要がある項目があります。

指定された記述をタグ内に貼り付ける

スクリーンショット 2021-06-30 11.07.26(2).png

この画面に遷移すると思います。

そしたら①の**Add Your Kit's Code to a Project(あなたのキットコードをプロジェクトに追加)**とあるのでコピーして貼り付けます。

application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>アプリ</title>
    <link 
    <script src="https://kit.fontawesome.com/個人ID.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

後は使いたいアイコンを見つけて貼り付けをすれば利用できます

スクリーンショット 2021-06-30 11.23.02(2).png

.html
<i class="fab fa-youtube"></i>

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?