Web制作
【最新版】Webアイコンフォント「Font Awesome」の使い方
2021年06月17日 8:00
おはようございます。社員Aです👩
今回は、Font Awesomeの使い方を解説します！
以前にも記事にしたことがあるのですが、
度重なる仕様変更で以前の方法では設定できなくなったので
改めて最新版の設定方法をまとめてみます。
もくじ
Webアイコンフォントとして有名なFont Awesome
Webアイコンフォントと言えば「Font Awesome」と言われるほどWEB業界ではよく使われていますよね。
導入から表示までがとっても簡単なので、弊社でも制作の際は重宝しています。
今回はその「Font Awesome」を初めて使う方に向けて、解説していきたいと思います！
Webアイコンフォントについて
フォントとして使用することができるアイコン素材のことを、Webアイコンフォントと言います。
例えば、メールや電話などのアイコンも画像として出さずにフォントとして表示することができるので、フォントと同様にサイズや色変更などCSS上で簡単に扱えるのがメリットです。
FontAwesomeの使い方
ここからは、早速FontAwesomeの使い方を解説していきたいと思います。
1.FontAwesomeに登録する
トップの「Start For Free」をクリック
メールアドレスを入力
登録したメールアドレスで認証をする
先程入力したアドレスに確認メールが届くので、指示に従って認証します。
パスワードを設定
認証が終わるとパスワード設定画面が表示されるので、パスワードを設定します。
名前を入力
続いて名前を入力します。
それ以外の箇所は特に入力しなくてもセットアップできます。
これでFont Awesomeへの登録は完了です！
2.FontAwesomeをサイトに読み込む
登録が完了するとコードが発行されるので、コピペして<head></head>間に貼り付けましょう。
3.使いたいアイコンを探す
Font Awesomeをサイトに導入したら、早速アイコンを探してみましょう。
最初にFree（無料版）で絞り込む
Font Awesomeには無料版と有料版のアイコンがあります。
検索をした時に最初は無料アイコンと有料アイコンが混在した形で表示されますので、サイドメニューで「Free」を選択して無料版のみに絞り込みましょう。
プロ版の契約をしていないのに有料アイコンを貼り付けても、当然ですが表示されません。
カテゴリからアイコンを探す
サイドメニューにカテゴリ分けされているので、カテゴリから探したいときはクリックしてみましょう。
検索ワードでアイコンを探す
使いたいアイコンがざっくり決まっていれば、検索ワードで探してみましょう。
日本語には対応していないので、英語での検索が必要です。
よく使う「Menu」や「Telephone」「Arrow」でも引っ掛かりますし、難しい単語であればGoogle翻訳で翻訳して検索すれば大体引っかかります！
4.アイコン詳細ページからコードをコピー
使いたいアイコンの詳細ページを開いたら、最上部に情報がまとまっています。
その中の<i> </i>の部分をクリックしてコピーしましょう。
この部分からSVGなどもダウンロードできます！
5.コピーしたコードをサイトに貼り付ける
先程コピーした<i> </i>の部分をサイトに貼り付けましょう。
ソースコード例
<i class="fas fa-arrow-alt-circle-right"></i> てすと
6.CSSなどで色やサイズを整える
FontAwesomeはフォントアイコンのため、フォントと同様に色やサイズを整えることが出来ます。
<i class="fas fa-apple-alt"></i> てすと
i{
font-size: 18px;
color: red;
}
:beforeや:afterなどの疑似要素にFont Awesomeを使う方法
Font Awesomeのアイコンは、テキスト上だけでなく、CSSの疑似要素「:before」や「:after」などの疑似要素にも使用できます。
次の方法で簡単に挿入できます。
1.アイコン詳細ページからコードをコピー
先程は、<i> </i>のコードをコピーしてきましたが、疑似要素に使用する場合は下記の部分をコピーします。
2.疑似要素でFont Awesomeを指定
div::before {
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: "\f35a";
}
下記のポイントを守って指定することで、疑似要素に指定できます。
- font-family部分に、「”Font Awesome 5 Free”」を指定
- content部分に「\」とコピーした英数字を貼り付ける
疑似要素に指定することで、ボタンや、リストの先頭などに簡単にアイコンをつけることができるのでとても便利です！
まとめ
Webアイコンフォントで定番の「Font Awesome」の最新版の使い方を解説しました。
CDNで手軽に導入できる点と、フォントと同様にCSSでデザインが扱いやすい点から、人気があります。
今後も仕様変更があった場合はこちらでも追記していきたいと思います。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
