• tips

Font awesomeの基本設定と、cssの疑似要素として使用する場合

WebアイコンといえばFont awesome。よく使うWebアイコンです。
今回は、Font awesome使用時の注意点などを備忘録としてまとめます。

 

Font awesome使用前の設定

基本的にはCDNを利用するパターンが多いかと思うので、以下のタグをコピーし、<head>内に入れてください。

</>html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/brands.css" integrity="sha384-BKw0P+CQz9xmby+uplDwp82Py8x1xtYPK3ORn/ZSoe6Dk3ETP59WCDnX+fI1XCKK" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous">

 

CDNには幾つか種類があります。
fontawesomeのCDN
Free版かPro版か、の選択の他に、
All、Solid、Regular、Brandsとコードの種類も選べます。基本的に右にいくほどコードが長くなります

基本はAllで大丈夫なんですが(他のブログでもAllのタグを選んでいるところが多い)、後述する、
cssの疑似要素として表示する際に、少し困ったことが起きるので、私はSolidをオススメします。

 

基本的な使用方法

Font awesomeサイトメニューの「icon」を選択し、アイコン一覧から、使用したいアイコンを検索します。

fontawesomeのコード

Font awesomeのサイトは、よくレイアウトが変わるので見つけにくい時もありますが、
だいたいコードが一行でまとまっています。サイズやカラーはテキストを変える要領で、colorfont-sizeで変更可能です。

実施に表示させると、こんな感じです。今回は使用頻度の高いアイコンを検索してみました。

See the Pen bzYjvr by maikatou (@logequal) on CodePen.0

 

cssの疑似要素として使用したい

fontawesomeを疑似要素で使う

Font awesome は、cssの疑似要素としても使用可能です。私は、ボタンにアイコンを入れたい時に使用しています。先程の 「icon」ページから、使用したいアイコンのコードを調べます。今回はユニコードをコピーします。

</>css


 .submit-btn:before {
  font-family: "Font Awesome 5 Free";
  content: '\f054';
  font-weight: 900;
}

 

font-family:を”Font Awesome 5 Free”;にし、
content:に、該当するユニコードを入れてください。ユニコードの前には\(バックスラッシュ)が必要です。

See the Pen fontawesome2 by maikatou (@logequal) on CodePen.0


 

cssの疑似要素として使用する場合は、最初のCDNの設定を、Allではなく、
Solidにしておく必要があります。私の場合、Allでは文字バケをしていましました。