概要
Font Awesomeを<i class="fa fa-hoge"><i>のようなクラス指定以外での方法で使用する方法について調べたので、
備忘録としてこちらにまとめます。
クラス指定以外での使用方法では、CSS3（またはSCSS）の擬似要素::afterまたはbeforeを用います。
擬似要素を用いてFont Awesomeを使う
まず、Webページ上でFont AwesomeのCSSを読み込ませます。
Rails等でFontAwesomeのGemを導入する手順を実行済みの場合は下記の手順は不要です
FontAwesomeを使用したページのhead内に記述する
<head><title>FontAwesome5の使い方</title><!-- 使用するFontAwesomeのバージョンに合わせ、"release/v5.○.○"/cssの数値を変えてください --><linkhref="https://use.fontawesome.com/releases/v5.0.6/css/all.css"rel="stylesheet"><!-- 以下省略 --></head>これでFont Awesomeが使えるようになりましたので、
サンプルとして、下記のHTMLに擬似クラスでFontAwesomeを使用してみましょう。
サンプルのHTML
<body><pclass="sample">サンプルテキスト</p></body>適当なCSSファイル内に記述。sampleクラスのpタグ内に、擬似クラスでFontAwesomeのアイコンを表示させる
p.sample::after{content:"\f304"font-family:"Font Awesome 5 Free";font-weight:900;}これで、サンプルテキストの文字列直後にペンのFontAwesomeアイコンが表示されるようになるはずです。
その際のポイントは下記の通り。
::after（またはbefore)で対象の要素内を指定するcontent: "\f○○○"で使いたいアイコンを指定する（アイコンコードはFontAwesome公式サイト参照- その際、"\（バックスラッシュ）"をコードの先頭につけること
- font-familyで
"Font Awesome 5 Free"（有料版はFreeではなくPro、BrandsならBrands）と記述- ※FontAwesomeのバージョンが５になる以前は
font-family: FontAwesome;の指定だけでOKでした
- ※FontAwesomeのバージョンが５になる以前は
- font-weightでアイコンの種類（solidかregularなど）を指定
また、font-weightで指定するアイコンの種類の数値はこちら
- font-weight: 900; <= Solid
- font-weight: 400; <= Regular
- font-weight: 400; <= Brands
- font-weight: 300; <= Light (Pro)
アイコンではなく四角い枠が表示されてしまう場合
FontAwesomeのCSSかfont-familyまたはアイコンコードの指定が間違っている可能性が考えられます。
記事の内容に間違いがございましたら、コメントの方にてご報告いただけると幸いです