Font Awesome 6を使う

てっちゃん
てっちゃん

以前、「ICOMOON」の紹介をブログで紹介しましたが、今回は自分でアイコンをデザインしなくても簡単に使える「Font Awesome」(無料版)の紹介です。
デザインやコーディングでの使用方法をご紹介します!
【Illustrator使用】「IcoMoon」でアイコンフォントを作ろう の記事はこちら

Font Awesomeはバージョンアップをしたりするので、その都度どのバージョンを使用したいのか確認をしながら設置する必要があります。
今現在、よく使われているのは「Font Awesome 5」だと思いますが、今回はベータ版ですが「Font Awesome 6」で紹介をしていきます。(v5はほかのサイトでもよく紹介されてるので^^;)
Font Awesomeのサイトが本格的にv6へ移行したので、ダウンロードまでの説明画像を修整しました!(2022.02.15修正)

今回はKitコードを使用する方法ではなく、ダウンロードして使う方法をご紹介しますね!

Font Awesome 6 Webサイト
https://fontawesome.com/

「Font Awesome 6」フォントの一覧
https://fontawesome.com/icons

デザインで使用する場合

フォントデータを自分のPCへダウンロードする必要があるので、下記からダウンロードしてください。

STEP1

STEP2

STEP3

フォントデータがzip形式でダウンロードされるので、自分のPCのフォントデータの中へ入れる

STEP4

Photoshopで使ってみる!

コーディングで使用する場合

Font AwesomeはCDN等の外部読み込みでも可能ですが、今回は自分のサイトへ「Font Awesome 6」をアップロードして使用する方法をご紹介!

STEP1

STEP2

STEP3

アイコンフォントとして使用する場合、必要ファイルなデータは下記のとおりです。
・all.css
・webfontsフォルダ

これらを使用したいサーバーへアップロードしてください。

STEP4

HTMLやcssへ書き込んでいきます!

「Font Awesome 6」フォントの一覧
https://fontawesome.com/v6.0/icons?m=free

HTMLの場合

  1. <head>
  2. <link rel="stylesheet" href="css-fontawesome/css/all.css"> ←head内にサーバーへアップしたall.cssのパスを記載
  3. </head>
  4. <i class="fa-brands fa-bilibili"></i>

CSSの場合

  1. @import url("css-fontawesome/css/all.css"); head内にサーバーへアップしたall.cssのパスを記載
  2. .test::before {
  3. font: var(--fa-font-brands); "brands"かどうかはFont Awesomeを確認してください
  4. content: "\e3d9";
  5. }

↓このように記載するとアイコンフォントが表示されます!

アイコンフォントなので、色や大きさは好きなように変更することが可能です

  1. <i class="fa-brands fa-bilibili fa-1x fa-spin"> <!--1em、回転-->
  2. <i class="fa-brands fa-bilibili fa-2x"> <!--2em-->
  3. <i class="fa-brands fa-bilibili fa-3x"> <!--3em-->
  4. <i class="fa-brands fa-bilibili fa-4x"> <!--4em-->
  5. <i class="fa-brands fa-bilibili fa-5x"> <!--5em-->
  6. <i class="fa-brands fa-bilibili fa-6x fa-flip"> <!--6em、フリップ-->
  7. <i class="fa-brands fa-bilibili fa-7x"> <!--7em-->
  8. <i class="fa-brands fa-bilibili fa-8x"> <!--8em-->
  9. <i class="fa-brands fa-bilibili fa-9x"> <!--9em-->
  10. <i class="fa-brands fa-bilibili fa-10x fa-beat-fade"> <!--10em、拡大しながら点滅-->

サイズ以外にもアニメーションやカスタマイズもとっても簡単にできます
サンプルは「Font Awesome」のサイトで紹介していますので見てみてくださいね!

アニメーションサンプル
https://fontawesome.com/docs/web/style/animate

不透明度やカラーサンプル
https://fontawesome.com/docs/web/style/duotone

リストアイコン
https://fontawesome.com/docs/web/style/lists

関連記事