WEBデザイン

FontAwesome5.3 リリース。386個のアイコンが追加

2018年7月28日、FontAwesome5のバージョン5.3がリリースされました。
新しく386個のアイコンが使えるようになります。
※Proバージョンの場合(Freeは一部のアイコンのみ)

FontAwesome5.3 アップデート内容

  1. ビジネスアイコンの追加(105個)
  2. 宗教アイコンの追加(90個)
  3. マーケティングアイコンの追加(93個)
  4. 数学アイコンの追加(57個)
  5. ステータスアイコンの追加
  6. ブランドアイコンの追加(theredyeti、Alipay)

ビジネスアイコン

宗教アイコン

マーケティングアイコン

数学アイコン

ステータスアイコン

FontAwesomeをアップデート方法

こちらはFontAwesome5.0以降を使用している方のアップデート手順になります。

FontAwesome4.7からのアップデートではアイコンが正しく表示されません。

CDNをご使用の方

【STEP1】コードをコピーする

こちらのコードをコピーします。

Web Fonts & CSSで使用する場合

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.3.1/css/all.css” integrity=”sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU” crossorigin=”anonymous”>

SVG & JavaScriptで使用する場合

<script defer src=”https://use.fontawesome.com/releases/v5.3.1/js/all.js” integrity=”sha384-kW+oWsYx3YpxvjtZjFXqazFpA7UP/MbiY4jvs+RWZo2+N94PFZ36T6TFkc9O3qoB” crossorigin=”anonymous”></script>

【STEP2】headタグ内に貼付け

ブログやWEBサイトのheadタグ内にある古いバージョンのコードを新しいものに置き換えます。

WordPress header.phpのheadタグ内にコードを取付け
FC2ブログ [設定テンプレートの設定 – ◯◯のHTML編集]のheadタグ内にコードを取付け
はてなブログ [設定 – 詳細設定 – headに要素を追加]にコードを取付け

ダウンロード版をご使用の方

【STEP1】FontAwesome5.3をダウンロードする

こちらからFontAwesome5.3をダウンロードできます。

FontAwesome5.3 ダウンロード

【STEP2】新しいファイルに置き換える

以下のファイルを先ほどダウンロードした最新のものに置き換えます。

css/ font-awesome.css
font/ fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff fontawesome-webfont.woff2
FontAwesome.otf

FontAwesomeの使い方

こちらの記事でFontAwesome5の使い方を紹介しています。

Font Awesomeの使い方【バージョン5.0対応】今回は、FontAwesomeの使い方について紹介します。 Font Awesomeとは Webアイコンフォントが表示できるようにな...