Font AwesomeをCSS擬似要素でアイコン設置する方法

WEBデザイン

Font Awesome を CSS 擬似要素で、アイコンとして設置するのって、なんだか難しそうですよね。

ですが、安心してください。基本となるコードはたった3つです。

わかってしまえば、むずかしいことはありません

というわけで今回は、Font AwesomeをCSS擬似要素でアイコン設置する方法を解説します。

Font AwesomeをCSS擬似要素で設置する方法

Font AwesomeをCSS擬似要素で設置する方法を、完成系をもとに解説していきます。

公式のやり方は、ちとむずかしい...

Fa suport csspeudo

公式のコードだと、いまいちピンとこなかったので、あらためて解説してみました。

より細かなデザインを調べたい方は、下の公式サイトをごらんください↓

今回の完成形


HTML解説

<a href="リンクURL" class="fa-link">Font AwesomeをCSS擬似要素でアイコン設置する方法</a>
解説
  • 通常のリンクをつかって、解説します
  • リンクURLは、書き換えてね!
  • クラス名は「fa-link」
  • コピペ OK!!

CSS解説

.fa-link::before {
    content: "\f0a4";
    font-weight: 400;
    font-family: "Font Awesome 5 Free";
    color: #313131;
    font-size: 125%;
    padding: 0 3px;
}
解説
  • content: "\f0a4"; → 呼びだす Font Awesome Unicode 名
  • font-weight: 400; → 300・400・900 を選べる。無料版は400・900のみ
  • font-family: "Font Awesome 5 Free"; → 無料版を指定している。
  • color: #313131; → 擬似要素の色を、変えている。
  • font-size: 125%; → アイコンをちょっと、大きくしている
  • padding: 0 3px; → アイコンと文字に隙間を作り、デザインの余白をつくっている
  • ::before で、.fa-link 直前の擬似要素に、Font Awesome アイコンを呼びだしています。

基本は3つのCSSコードでOK

基本のコード
  • content: "\f0a4";
  • font-weight: 400;
  • font-family: "Font Awesome 5 Free";

Font Awesome アイコンを擬似要素で呼びだすには、この3つのコードがあれば大丈夫です。

FontAwesomeが、CSS 擬似要素で表示できない解決方法

FontAwesome を CSS 擬似要素で表示できないときは、別のコードを HEAD 内に入力してみましょう。

HEAD内に入力するコードは、こちら↓

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

とりあえず、コピペして HEAD 内に貼り付けてください。

ヘルプページのUpgrading from Version 4 | Font Awesome にある項目「Upgrade Shims」にある公式のコードです。

キットコードじゃないくても、たった1行をコードをいれるだけで...Font Awesome アイコンを CSS 擬似要素で呼びだせるようになるんです。

助手くん
助手くん
それじゃあ、キットコードの意味って?
管理人
管理人
わたしにも、分からん。汗

Font Awesome の擬似要素が、表示されず困ったときに試しください。

CSS 擬似要素で、表示されない原因を探る

Dl examplefile fa3

HEAD内にキットコードを入力しただけで、CSS擬似要素で表示できない原因を探ってみましょう。

症状としては、FontAwesome アイコンが、「□(四角)」で表示されます。

Dl examplefile fa

そこで、Start | Font Awesome から、Download Example Fileをクリックして、FontAwesome の導入お手本 HTML をダウンロードしてみましょう。

これで、HEAD 内を確認してみます↓

Dl examplefile fa2

HEAD 内に出力されていたのは、次のコードでした↓

<script src="https://kit.fontawesome.com/xxxxxxxxxx.js"></script>
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">

xxxxxxxxxxは、あなたのキットコードの番号が入ります。

この3つのコードは、きっとコードを導入したこのブログでも、確認できました。

でもでも、なぜか!3つのコードが出力されても、擬似要素で Font Awesome が表示されないんです。

謎です...原因の究明まではできませんでしたが、解決方法はわかっているので、保留にしておきます。

まとめ

Font AwesomeをCSS擬似要素でアイコン設置する方法を解説してきました。まとめると、こんな感じ↓

今回の完成形

解説したHTML

<a href="リンクURL" class="fa-link">Font AwesomeをCSS擬似要素でアイコン設置する方法</a>

解説したCSS

.fa-link::before {
    content: "\f0a4";
    font-weight: 400;
    font-family: "Font Awesome 5 Free";
    color: #313131;
    font-size: 125%;
    padding: 0 3px;
}

擬似要素で Font Awesome を使う方法は、分解すればむずかしくありません。

ぜひあなたのサイトにも、読者にわかりやすいアイコンを導入してみてくださいね。

  • Font Awesome の会員登録の方法
  • 導入コードを HEAD 内に記入するやり方
  • WordPress プラグインで導入する方法
  • ...など。

そのほか、FontAwesomeに関する記事は、こちらをご覧ください↓

サウンドオルビス

5,900,702 views

サウンドテック・ラボ編集長兼ライター。「音楽×テクノロジー」で、あなたの「やってみたい」をお手伝いします。人生にドラマを!!

プロフィール

ピックアップ記事

カテゴリ内の記事