登録なしで Font Awesome 5 を使う【CDN】【ダウンロード】

登録なしで Font Awesome 5 を使う【CDN】【ダウンロード】 WordPress

こんにちは、mickです。

Webアイコンのフォントを使うのに慣れてしまうと、使わない選択を取れなくなります。
Webアイコンを使えば、デザインで一気にひと目で伝わりやすくなります。

自分はよく、Font Awesome を利用。
理由は、初めて使った Webアイコンがこれだったから。

WordPress のテーマに Font Awesome が設定されていれば楽。
ということは、つまり Font Awesome が設定されていなければ、自分で用意する必要があります。

Font Awesome を導入する

WordPressではWebアイコンに Font Awesome を使っています。初めからテーマに入っていれば使うだけなので簡単。もしそうでないなら自分での初期設定が必要です。

Font Awesome をWebサイトに導入するには、大きく2つあります。

  • データをダウンロードしてWebサイトに設置して使う
  • CDNとして外部データを参照して使う

使うときには、headタグ内にlinkタグを使って Font Awesome の Webフォントを読み込むようにします。

初期設定(データをダウンロードして読み込む場合)

使用しているWordPress のテーマに Font Awesome が入っていないなら自分で初期設定する必要がでてきます。
データのダウンロードは、Font Awesome の公式Webサイトからです。

Font Awesome の公式Webサイトからデータをダウンロード
Font Awesome の公式Webサイトからデータをダウンロード
ダウンロードするバージョン5はスクロールして下へ
ダウンロードするバージョン5はスクロールして下へ
バージョン5のデータをダウンロード(画面スクロールした先)
バージョン5のデータをダウンロード(画面スクロールした先)

ダウンロードしたファイルを解凍。

基本的には、そこにある CSS ファイルを使います。
とりあえず、cssフォルダ内にある all.min.css を使えばOK。

cssフォルダ内にある all.min.css を使えばOK
cssフォルダ内にある all.min.css を使えばOK

任意の場所に設置して、次のようにheadタグの中にlinkタグで読み込むようにします。

<link rel ="stylesheet" href="css/all.css">

初期設定(CDNで外部からデータを読み込む場合)

手っ取り早く Font Awesome を使う方法はこちら。
GitHubのページから最新のCDNの場所を複製します。
この記事を書いているときの最新は、つぎのやつでした。

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
GitHubのページから最新のCDNの場所を複製する
GitHubのページから最新のCDNの場所を複製する

使うときは、次のようなlinkタグになります。

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Webサイトでの使い方

Font Awesome を Webサイトで使うときは前に記事を書いています。
ぜひそちらを見て欲しいです。

まとめ。

登録なしで Font Awesome 5 を使う方法を紹介しました。
Font Awesome の Webアイコンのデータをダウンロードするか、CDNで参照すればすぐに使えるようになります。

慣れないうちの最初は、CDNで使うのがオススメ。
headタグにlinkタグで読み込むだけで使えるようになるから。

Webアイコンを使うと見栄えがぜんぜん違うのでぜひ試してみて欲しいです。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/07/16

タイトルとURLをコピーしました