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の場合

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

CSSの場合

@import url("css-fontawesome/css/all.css");	←head内にサーバーへアップしたall.cssのパスを記載


	.test::before {
		font: var(--fa-font-brands);	←"brands"かどうかはFont Awesomeを確認してください
		content: "\e3d9";
	}

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

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

<i class="fa-brands fa-bilibili fa-1x fa-spin">		<!--1em、回転-->
<i class="fa-brands fa-bilibili fa-2x">				<!--2em-->
<i class="fa-brands fa-bilibili fa-3x">				<!--3em-->
<i class="fa-brands fa-bilibili fa-4x">				<!--4em-->
<i class="fa-brands fa-bilibili fa-5x">				<!--5em-->
<i class="fa-brands fa-bilibili fa-6x fa-flip">		<!--6em、フリップ-->
<i class="fa-brands fa-bilibili fa-7x">				<!--7em-->
<i class="fa-brands fa-bilibili fa-8x">				<!--8em-->
<i class="fa-brands fa-bilibili fa-9x">				<!--9em-->
<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

関連記事