WEB

FontAwesome5.2リリース。372個のアイコンが追加!!

FontAwesome5.3がリリースされました。

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

FontAwesome5.2 アップデート内容

  1. 自動車カテゴリーの追加
    (自動車アイコン 105個追加)
  2. 教育カテゴリーの追加
    (教育アイコン 81個追加)
  3. 医療アイコンの追加と変更
  4. 地図アイコンの追加と変更
  5. ブランドアイコンの追加(6個)

自動車アイコン

教育アイコン

医療アイコン

地図アイコン

ブランドアイコン

FontAwesomeをアップデート方法

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

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

CDNをご使用の方

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

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

Web Fonts & CSSで使用する場合

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.2.0/css/all.css” integrity=”sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ” crossorigin=”anonymous”>

SVG & JavaScriptで使用する場合

<script defer src=”https://use.fontawesome.com/releases/v5.2.0/js/all.js” integrity=”sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy” crossorigin=”anonymous”></script>

【STEP2】headタグ内に貼付け

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

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

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

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

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

FontAwesome5.2 ダウンロード

【STEP2】ファイルの設置

以下のファイルを

css/ font-awesome.css
font/ 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アイコンフォントが表示できるようにな...