WEBアイコンや記号・マークをカンタンに表示させたい!Font Awesome

その他

2019-08-11

読みやすさのためにアイコンを使いたいな、でも作ると手間かかるし…。
そんな時、商用OKのフリーアイコンはとっても便利です!

初心者でも簡単! Webアイコンフォント Font Awesome

Font Awesomeには無料と有料(PRO版)があり、有料版だと使用できるアイコンの種類が増えます。無料版でも使いやすいアイコンが豊富に揃っています。
お手軽なのでこのサイトでも使っていますよ。
Font Awesome5.9以降はアカウント登録が必要です(無料)。

STEP1

head 内に下記を記述して読み込みます。CDN(Web上に公開されているファイル)なので自分のサーバーにアップしなくても使用可能です。公式サイトからファイルをダウンロードして使うこともできますよ。
WordPressのテーマによっては、Font Awesomeがあらかじめ導入されているものもあります。ソースを見てチェックしてみてくださいね。

<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">

 

STEP2

使用したいアイコンを一覧から検索して、記述されているコードをコピーして貼り付けます。

編集ページにそのまま記述(例)
<i class="fas fa-shopping-cart"></i>

cssに疑似要素で記述(例)
セレクタ:after {
  content:'\f07a';
  font-family:'Font Awesome 5 Free';
  font-weight:900;
}

cssに疑似要素で記述 旧バージョン4.7(例)
セレクタ:after {
  content:'\f07a';
  font-family: FontAwesome;
}

 

注意

cssに疑似要素で設定する際は、タイプをfont-weightで設定します。Solidタイプの表示にはfont-weight: 900;を、Regularタイプ、Brandsタイプの表示にはfont-weight: 400;を記述すること。ブランドアイコンを使うときは、font-family名を”Font Awesome 5 Brands”とすること。

サイズや回転などカンタンにスタイルを変更

Font Awesomeはコードにクラスをつけるだけで大きさや角度を変えられます。

fa-3xを追加した例
<i class="fa fa-3x fa-camera" aria-hidden="true"></i>
fa-3x fa-rotate-90を追加した例
<i class="fa fa-3x fa-rotate-90 fa-camera" aria-hidden="true"></i>
fa-spinner fa-pulse fa-2x fa-fwを追加した例
<p class="mt_20"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>

 

 … そのまま

 … fa-3xを追加

 … fa-3x fa-rotate-90を追加

 … fa-spinner fa-pulse fa-2x fa-fwを追加

こちらからそのままクラスを使える使用例を見ることができます。
スタイルいろいろ 公式サイトExamples
可愛いアイコンやアニメーション、なんだか楽しいですね。

この他、こまかいサイズ変更・回転や色や線、アニメーションなどを自分でクラスをつけてスタイルシートで指定すれば好きなように装飾できます。

Font awesome 表示されない!?

あれ?設定したのに表示されない!
そんな時にチェックしたいポイントがこちらです。

Font awesomeのバージョン

ヘッダーに入れたCDNなどのFont awesomeのバージョンと、ページに入れたアイコンのFont awesomeのバージョンが異なると表示されません。

cssの記述

font-familyやfont-weightが抜けてないか確認します。バックスラッシュ”\”も忘れずに。
Solidタイプの表示にはfont-weight: 900;を、Regularタイプ、Brandsタイプの表示にはfont-weight: 400;を入れます。
バージョンによっても書き方が違うので注意します。

有料版から選んでしまった

アイコン一覧から探したときに、有料のアイコンからコピーしているかも?

おまけ よく使う特殊文字

スペース

(cssで空白を作るほうが、調整可能で環境の影響が小さいため推奨されているようです。)

&nbsp; 半角スペース
&ensp; 半角スペースより少し広い空白
&emsp; 全角スペースとほぼ同じ大きさの空白
&thinsp; &nbsp;の空白より小さい空白

 

その他

&copy; コピーライト(著作権)
&quot; クォーテーション(引用符)
&amp; アンパサンド
&lt; 小なり
&gt; 大なり

 

-その他

関連記事

スマホでhoverが効かない!タップでも対応させたい!

スマホでもhoverでつけた動きを反映させたい ontouchstart属性を追加する場合 ontouchstart属性を追加します。要素は特に入れなくてOKです。疑似クラス「:hover」を設定した …

画像を一括変換させたい

photoshopの自動処理「バッチ」は、複数の画像を自動で一括処理できる便利な機能です。例えば画像100枚をRGBからCMYKへ変換するだけでも、1枚ずつ行えば結構時間がかかりますね。それを、バッチ処理ならアクションを登録するだけ。後は自動で仕上げてくれます。

どのリンクから訪問された?パラメータで流入元を把握しよう!

自分のサイトへアクセスしてくれた、その流入元がどこなのか知りたい! リスティング広告? FaceBook? 自然検索? その他、考えられる経路はたくさんあります。 メルマガ、LINE、アプリ、QRコー …

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。