読みやすさのためにアイコンを使いたいな、でも作るのに時間がかかるし…。そんな時に、商用OKのフリーアイコンはとっても便利です！
Webアイコンフォント Font Awesome
STEP1
head 内に下記を記述して読み込みます。CDN（Web上に公開されているファイル）なので自分のサーバーにファイルをアップしなくても使用可能です。
|
1 |
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet"> |
STEP2
使用したいアイコンを一覧から検索して、記述されているコードをコピーして貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
編集ページにそのまま記述（例） <i class="fas fa-shopping-cart"></i> cssに疑似要素で記述（例） セレクタ:after { content:'\f07a'; font-family:'Font Awesome 5 Free'; font-weight:900; } cssに疑似要素で記述 旧バージョン（例） セレクタ:after { content:'\f07a'; font-family: FontAwesome; } |
注意
cssに疑似要素で設定する際は、タイプをfont-weightで設定します。Solidタイプの表示にはfont-weight: 900;を、Regularタイプ、Brandsタイプの表示にはfont-weight: 400;を記述すること。ブランドアイコンを使うときは、font-family名を”Font Awesome 5 Brands”とすること。
おまけ よく使う特殊文字
スペース
（cssで空白を作るほうが、調整可能で環境の影響が小さいため推奨されているようです。）
|
1 2 3 4 |
半角スペース   半角スペースより少し広い空白   全角スペースとほぼ同じ大きさの空白   の空白より小さい空白 |
その他
|
1 2 3 4 5 |
© コピーライト（著作権） " クォーテーション（引用符） & アンパサンド < 小なり > 大なり |
