Font Awesome 5のアイコンを::beforeや::after等の疑似要素で指定する方法

Font Awesome 5のアイコンを::beforeや::after等の疑似要素で指定する方法

Font Awesome 5のアイコンを::beforeや::after等の疑似要素で指定する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Font Awesome 5のアイコンを::beforeや::after等の擬似要素として指定する方法をご紹介いたします。

::beforeや::afterのcontentプロパティでアイコンを指定することで、リストのマーカーなどでも簡単にFont Awesomeのアイコンを使用できるようになります。

スポンサードリンク

Font Awesome 5のアイコンを::beforeや::after等の疑似要素で指定する方法

まずは、<head>~</head>内に以下のようなメタタグを記述し、Font Awesome 5をロードしましょう。Font Awesome用のメタタグはStartページにて取得できます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

:beforeや::afterでFont Awesome 5のアイコンを使う場合、CSSでは以下のように指定します。


::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: bold;
}

font-familyで”Font Awesome 5 Free”を指定し、contentで表示させたいアイコンのUnicodeを指定します。

アイコンのUnicodeは、Iconsページから検索した際に詳細ページを開くと確認できます。

アイコンのUnicode

アイコンの種類が「Solid Style」となっている場合は、「font-weight: bold;」も一緒に指定しないとアイコンが表示されないことがあります。「Regular Style」となっている場合は不要です。最初は「font-weight: bold;」を指定しないといけないことになかなか気付けなくて結構ハマりました^^;

あとがき

Font Awesomeをよく使う方は、疑似要素での指定方法も覚えておくと便利だと思います。参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。