A3 Code Note

09/01/2022

Font Awesome

Font Awesomeの使い方

まずはFont Awesomeを使える状態にする。

  1. 「font awesome」と検索しサイトに行く
    https://fontawesome.com/
  2. start for free > Send Kit Code
    メールアドレスを入力
    メールを確認 > Click to Confirm Your Email Address + Set Things Up
    パスワードを設定
    それぞれ埋めても、うめなくてもOK > All set. Let’s go!
  3. Your Kits > New Kit
    編集する場合は Kitの名前をクリック
  4. それぞれ埋める。そのままでもOK。

使ってみる

  1. Kitsをクリックして、その中に書いているFontAwesomeを読み込めるコードをコピー。以下のようなやつ
    <script src=”https://kit.fontawesome.com/…”></script>
  2. コードが取得できたらHTMLに読み込めるようにそのままコードを<head></head>内に貼り付け
  3. メニューの Icons で、好きな雰囲気を選び一番左側の「free」で無料のものを選択
  4. ソースをコピーして貼り付け

メールアドレスの登録などをしたくない場合はCDNで使う

  1. 「fontawesome cdn」と検索
    https://fontawesome.com/v5/docs/web/use-with/wordpress/install-manually
  2.  「Load All Styles」のlink要素をコピー

うまくいかないとき

Kitを削除して、もう一度作り直すとうまくいくかも。

Make It Awesome

サイズ調節、アニメーションなど classを付与するだけでできます。

デモ