font awesomeの使い方 | WEB制作の備忘録めもミフネWEB

無料で多種多様のアイコンフォントを利用することのできるfont awesome

新しく作っているサイトで使おうと思ったら、以前とバージョンが変わり若干の変更がありましたのでまとめておきます。

font awesomeとは

ざっくりと説明します。
よく使うSNSのマーク（・）などのアイコンをいちいち自作しなくても、font awesomeからデータを読み込ませることで好きなアイコンを表示することのできるものです。
この枠内のアイコンもfont awesomeで表示しています。

INDEX

font awesome基本の使い方

準備することは１つだけ。<head>タグ内に以下のコードを記述。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" >

あとはfont awesomeのサイトで好きなアイコンを探します。無料のものだけで1,341種類ありますので大体は見つかるでしょう。

アイコン詳細画面の<i>〜</i>で囲まれた部分をコピーし任意の場所に貼り付け。

基本的には以上です。

<i>タグに自動的に付与されているclass属性に[ fa-2x ]を書き加えると２倍に。fa-3xだと３倍になります。（最小fa-xsから最大fa-10xまで）

(例)

１倍　：

２倍(fa-2x)　：

４倍(fa-4x)　：

cssで編集しても問題ありません

<i class="fas fa-home"></i>

<!-- css -->
{
  font-size:180%;
  color:tomato;
}

↓

パンくずリストなどでよく見かける、:before :afterなどの擬似要素にfont awesomeを指定する場合は以下の通りです。

#hoge:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
        content:f015
}

以前は font-family:’FontAwesome’; と書いていたと思うのですがバージョン５xxから変わったようです。

font weightではスタイルを指定しています。フリー利用ではSolid styleしか利用できませんので900になります。

content にはバックスラッシュと下図のコードを記入します。

ほかにも回転フォント、font awesomeを重ねて利用できるなど高い実用性ですので活用してみてください。