【Scss】@mixinを利用してFontAwsomeアイコンを疑似要素(:before)で挿入

  • このエントリーをはてなブックマークに追加

FontAwsomeを利用すると、Webページ上でWebアイコンフォントを表示することができます。Webアイコンフォントとは、文字と同じように表示できるアイコンのことで、拡大してもぼやけず、色もサイズも簡単に変更できるので非常に便利です。
アイコン挿入方法として、主にHtml内にiタグを貼り付ける方法とCssの疑似要素(:before)を利用して挿入する方法があります。Cssでアイコン挿入のスタイルを作成しますが、Scssの@mixinを利用すると、より便利でわかりやすくアイコン挿入のスタイルを作成することができます。今回は、Scssの@mixinを利用してのFontAwsomeアイコン挿入方法を、サンプルコードを提示しながら説明します。

  1. Fontawsomeとは
  2. Fontawsome5でアイコン表示
  3. 下準備(アコーディオンメニュー作成)
  4. @mixinを利用

 1. FontAwsomeとは

Fontawsomeとは、Webページ上でWebアイコンフォントを表示するようにしてくれるサービスのことです。

Webアイコンフォントとは

アイコンが文字と同じように表示されるため、色やサイズの変更が簡単に行えて、拡大してもぼやけることがありません。

 2. Fontawsome5でアイコン表示

アイコン挿入方法として、主にHtml内にiタグを貼り付ける方法と疑似要素を利用して挿入する方法の2種類あります。

【例1】Html内にiタグを貼り付ける

【例2】Cssの疑似要素を利用する

●Html

●Scss

疑似要素でアイコンを設定する注意点


FontAwsome5で疑似要素を利用する際、アイコンが□に表示されてしまう場合があります。対策方法を下記の記事で説明してます。

 3. 下準備(アコーディオンメニュー作成)

疑似要素を利用してメニュー項目の左側にアイコンが表示されているアコーディオンメニューを作成します。
Bootstrapを利用したアコーディオンメニューの作成方法は以下の記事でサンプルコードを提示しながら説明しています。

青文字で指定しているメニュー項目の左側に、FontAwsome5を利用して疑似要素でアイコンを挿入します。

●Scss

メニュー項目の子メニューが開いている場合はアイコンの向きを下に、閉じている場合はアイコンの向きが右向きになるようScssを変更します。

●Scss

作成したアコーディオンメニューは以下のようになります。子メニューの開閉と同時にアイコンの向きが変わります。

 4. @mixinを利用

作成したScssを確認すると、content:”  ”;(Unicode)部分以外は共通しています。

そこで、疑似要素でアイコンを挿入するスタイルを@mixinで定義して、@includeで呼び出すことでスタイル定義の重複を減らします。

●Scss

@mixinを利用して表示するFontAwsomeアイコンの挿入スタイルを定義し、@includeで定義した@mixinを呼び出します。@mixinでは「引数」を利用することができるため、表示するアイコンのUnicodeと文字の太さを表す値を渡し、contentとfont-weightの値にそれぞれ設定します。FontAwsomeアイコンのUnicodeは、変数で定義しておくとわかりやすいでしょう。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*