はじめての Font Awesome

この記事は 2019年2月28日 に書かれたものです

いつも使い方を忘れるのでメモ。

1 公式ドキュメント
- 1.1 ライセンス
2 使い方
- 2.1 ライブラリ
- 2.2 利用方法
3 応用
4 参考ページ
5 書籍

公式ドキュメント

「Start」と「Basic Use」あたりに一通り書いてありますので、基本的にはこちらを参照するのが最も正確です。

ライセンス

無料版ではアイコン、フォント、コードによってそれぞれ別れています。いずれも一般的なWebサイトなどで利用する分には個人、商用問わず利用できます。GPLのようにコードの公開やコピーレフトもありません。

Icons: CC BY 4.0 License
Fonts: SIL OFL 1.1 License
Code: MIT License

Font Awesome

https://fontawesome.com/license/free

fontawesome.com

使い方

ライブラリ

Startページでlinkタグを生成し、利用したいページのheadタグ内などに貼り付けます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello FontAwesome</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>

</body>
</html>

オフラインでの利用や、何らかの理由で自分のサーバ内などに設置したい場合、ダウンロードして利用することも可能です。

Font Awesome 5 Hosting Font Awesome Yourself

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Learn how to use Font Awesome 5 to add vector icons and social logos to your website, desktop design, or project.

fontawesome.com

npmやyarnでの利用にも対応しています。
https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

ReactのComponentもありますね。
https://fontawesome.com/how-to-use/on-the-web/using-with/react

利用方法

公式サイトで適当に検索などし、表示されたタグをコピペするだけです。

上記のページでいうなら、実際に貼り付けるのは以下のコード。これを表示すると歯車に置き換わります。

<i class="fas fa-cogs"></i>

応用

色を指定する

CSScolorで指定することができます。

<div style="color:red">
  <i class="fas fa-cogs"></i>
</div>

もしくは自分で作ったクラスを指定する方法もあります。

<style type="text/css">
 .fa-blue{color:blue;}
</style>

<i class="fas fa-cogs fa-blue"></i>

大きさを指定する

CSSfont-sizeで大きさを変化させることができます。

<div style="font-size: 12px">
  <i class="fas fa-cogs"></i>
</div>

もしくは大きさを指定するクラスを追加することもできます。

<i class="fas fa-cogs fa-xs"></i>

クラス	表示例
fa-xs
fa-sm
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
fa-6x
fa-7x
fa-8x
fa-9x
fa-10x

なおこれらは「相対」的なサイズとなっており、font-sizeによって変動する点に注意する必要があります。以下の例ではいずれもfa-2xを指定していますが、表示した際の大きさが異なります。

<div style="font-size:10px;">
  10px <i class="fas fa-cogs fa-2x"></i>
</div>
<div style="font-size:20px;">
 20px  <i class="fas fa-cogs fa-2x"></i>
</div>

一括して指定する

特定のアイコンを一括して指定したい場合、以下のようにCSSの継承を利用して上書きすることが可能です。

<style type="text/css">
 .fa-cogs{
   color: red;
   font-size: 30px;
 }
</style>

<i class="fas fa-cogs"></i>

リストで利用する

ulなどのリストで利用することもできます。

<ul class="fa-ul">
  <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>りんご</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>みかん</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>バナナ</li>
</ul>

実行結果