Contents
2018年7月28日、FontAwesome5のバージョン5.3がリリースされました。
新しく386個のアイコンが使えるようになります。
※Proバージョンの場合(Freeは一部のアイコンのみ)
FontAwesome5.3 アップデート内容
- ビジネスアイコンの追加(105個)
- 宗教アイコンの追加(90個)
- マーケティングアイコンの追加(93個)
- 数学アイコンの追加(57個)
- ステータスアイコンの追加
- ブランドアイコンの追加(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をダウンロードできます。
【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の使い方を紹介しています。
