ブログ
【WEB制作の基本】Font Awesomeの使い方
![【WEB制作の基本】Font Awesomeの使い方](https://fair-design.net/wp-content/uploads/2023/05/blog_image-sp-2.png)
FontAwesome(フォントオーサム)はWebサイトや、ブログなどで簡単にアイコンを表示させることができるサービスです。
バージョンアップや仕様変更を経て、現在ではPRO版(有料)も用意されています。
無料版でも多くののアイコンが用意され、世界中で多くユーザーに利用されています。
この記事では、FontAwesomeの使い分けを解説していきます!
Font Awesomeとは
Font Awesomeとは、アイコンを文字として扱うことを可能にしたツールです。
図形ではなく「フォント」使うので、サイズや色などすべて CSS で調整して利用することができます。
公式サイトはこちら
Font Awesomeの使い方
読み込み方法
使用するためには、Font Awesomeを読み込む必要があります。
読み込み方法は以下の3つあります
(1)CDNを使う
下記のコードをコピーしてhead内に記載します。
<link href=”https://use.fontawesome.com/releases/v6.0.0/css/all.css” rel=”stylesheet”>
これだけでFont Awesomeを使えるようになるので、手軽で簡単な方法です。
(2)サーバーにファイルを配置
Font Awesomのサイト上でアカウント作成を行いファイルをダウンロードして、自身のサーバーにアップロードする方法です。
(3)Kitを使う
最新版では、「Kit」というものでFont Awesomeの読み込みができるようになりました。
Font Awesomのサイト上でアカウント作成を行い、Kitを選択すると埋め込み用のコードが表示されます。
コードをコピーしてhead内に記載します。
<script src=”https://kit.fontawesome.com/自身の番号.js” crossorigin=”anonymous”></script>
今回はKitを使った方法を説明します。
Font Awesomeに登録
![](https://fair-design.net/wp-content/uploads/2023/05/bc8a694c-9d92-4b9d-9eb0-3c6b8444e485.jpg)
サイトにアクセスし、無料のユーザー登録を行います。
「Start for Free」を選択します。
![](https://fair-design.net/wp-content/uploads/2023/05/819cb946-cf73-4609-8126-4dd2431aebcf.png)
メールアドレスを入力して「Send Kit Code」を選択します。
選択すると、記入したメールアドレス宛に確認のメールが送られます。
![](https://fair-design.net/wp-content/uploads/2023/05/eafa560c29d2ddfbe5e4d9cf30112ea0.jpg)
送られてきたメールの「Click to Confirm Your Email Address + Set Things Up」を選択します。
![](https://fair-design.net/wp-content/uploads/2023/05/d664ab71-c535-45d3-bea0-4224d3756126.jpg)
ログインパスワードを入力し「Set Password & Continue」を選択します。
これで登録は終了です。
Kitコードを貼り付け
![](https://fair-design.net/wp-content/uploads/2023/05/1d432bed-c235-44f4-93a6-a28de0c25fb4.png)
ユーザー登録をするとユーザー固有番号が作られます。赤枠内の英数字がそれです。
![](https://fair-design.net/wp-content/uploads/2023/05/3a503cc5-34a1-4b2d-8e66-5c0debe13009.png)
この数字が入ったタグを、自身のサイトの
~内に貼り付けます。これで事前準備は終了です。
<html>
<head>
<script src="https://kit.fontawesome.com/自身の番号.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- サイトのコンテンツ -->
</body>
</html>/* Your code... */
アイコンを探す
![](https://fair-design.net/wp-content/uploads/2023/05/0548eeed-a86b-43e3-8671-26054cf8d903.png)
アイコンのギャラリーページから、使いたいアイコンを検索します。
キーワードを入れて検索することができます。日本語だと検索できないので、英語で入れます。
アイコンのコードを貼り付け
![](https://fair-design.net/wp-content/uploads/2023/05/b94adc05-3ad6-4dca-a0fd-f38d55b948de.png)
使いたいアイコンを選択すると、詳細画面が表示されます。
の箇所を選択するとコードがコピーされます。このコードを、サイトの
これだけでアイコンが表示されます
色を変更する
![](https://fair-design.net/wp-content/uploads/2023/05/51f790a4-9c0f-4ee8-a96e-aecbc7c58b55.png)
詳細画面でカラーの項目を選択することでiタグにCSSが適応されます。
色の指定はカラーピッカーをはじめ、RGB値、HSL値、HEX値で指定できます。
また、クラス名に対して、CSSで色を指定することも可能です。
サイズを変更する
![](https://fair-design.net/wp-content/uploads/2023/05/02a56c15dd460e9bc21253e9702e24f3.png)
詳細画面でサイズの項目を選択することでiタグにCSSが適応されます。
サイズの指定は
「2xs、xs、sm、lg、xl、2xl」
があります。
また、クラス名に対して、CSSでサイズを指定することも可能です。
アニメーションを設定する
![](https://fair-design.net/wp-content/uploads/2023/05/7f93cbc613d4e9df57d1ce98f74091db.png)
詳細画面でアニメーションの項目を選択することでiタグにCSSが適応されます。
アニメーションの指定は
「Beat、Beat Fade、Bource、Fade、Flip、Shake、Spin、Shake、Spin、Spin Reverse Spin Pluse」
があります。
向きを設定する
![](https://fair-design.net/wp-content/uploads/2023/05/4015a4fb05c7c91f2aadef9a1b1207c8.png)
詳細画面でアニメーションの項目を選択することでiタグにCSSが適応されます。
アニメーションの指定は
「Rotate 90、Rotate 180、Rotate 270、Flip Horizontal、Flip Vertical、Flip Both」
があります。
【番外編】CSSだけでアイコンを表示
![](https://fair-design.net/wp-content/uploads/2023/05/fd0bd4e9-4e21-4c4d-975f-5a1cd0d85b4f.png)
HTMLにを書くのではなく、CSSの疑似要素を使ってアイコンを表示させることもできます。
「content:」に入れる値は詳細画面よりコピーします。
<p class="wp">WordPressアイコン</p>
.wp{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f19a';
}