Font Awesomeのアイコンを疑似要素でつかう方法

FRONTEND

2019.04.12

2019.04.14

fontawesomeのアイコンを疑似要素でつかう方法

今回はFont Awesomeのアイコンを::beforeや::afterの疑似要素で表示させるCSSの紹介です。

Font Awesomeのアイコンをつかうようになって、ますます画像に頼らないといけない場面が減ってきました。メニューやボタンについてはphotoshopで制作して、書き出して・・・みたいな作業はもう何年もやっていないような気がします。Font AwesomeとCSS3で十分です。ミニマルデザインやフラットデザインの流行も無関係ではないと思いますが。

【基本】FontAwesomeの使い方

CSSを読み込む

公式サイトのナビメニューにある「Start」からも辿れますが、下記CSSを<head>で読み込みます。

【公式サイト】Font Awesom

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

つかいたいアイコンを選ぶ

公式サイトのナビメニューにある「Icons」をクリックして、つかいたいアイコンを選びます。無料プランの場合はサイドメニューにある「Free」をクリックしてソートしておきます。時間をかけて探したのに有料プラン用のアイコンだとへこむので。

今回はサンプルとしてhttps://fontawesome.com/icons/arrow-right?style=solidというアイコンを使います。

アイコンのUnicodeを取得

つかいたいアイコンの個別ページからUnicodeを取得します。サンプルのUnicodeは「f061」です。

Font Awesomeのアイコンを疑似要素で表示

See the Pen
PgKXER
by keitasakurai (@mdesignyokohama)
on CodePen.

以前のFont Awesomeであれば必要ないのですが、Font Awesome5になってからは「font-weight: 900;」というようにfont-weightの指定が必須です。結構ハマりがちなポイントです。