グローバルメニューにプラグインなしでアイコンフォントを表示する

2019-03-31カスタマイズアイコンフォント, プラグイン不要

 

ワードプレスのグローバルメニューにアイコンフォントを表示する方法です。
通常の「メニュー」の編集だけで簡単に表示できます。

5452_07

 

Font Awesomeアイコンフォントって?

「Font Awesome」はアイコン版のWebフォントで、フリーとプロ(有料)があります。

フリーのものだけでSNSのアイコンや、メール、ホーム、ショップ用など様々な使いやすいアイコンを含む1,500種類ほどあり、誰でも自由に使えます。

Font Awesome

 

利用方法

  1. CDN利用
  2. 自サーバへアップロード

CDNでの利用とは、フォントのあるサーバーから読み込んで利用する形式です。

フォントをダウンロードして、自サーバーへアップロードしても使えますが、手間や負荷を考えると、CDNを利用した方が簡単で便利です。

指定のCSSファイルへのリンクを追記する事で、サイト内のCSSでカスタマイズしながら利用出来ます。

通常のフォント同様、サイズや色も編集できます。

 

ルクセリタスをお使いの方へ

ルクセリタスには「Font Awesome」対応機能があり、設定にチェックを入れるだけで利用可能です。

Luxelitas→カスタマイザーで CSSタブを選択すると下の方に設定項目があります。

「Font AwesomeオリジナルのCSS」と、「CDN」読み込みにチェックを入れます。
※デフォルトでは「Luxeritasで必要最小限のCSSのみ」になっています。

これで、以下のCSSリンクを貼るの項は必要ありません。

 

CSSリンクを貼る

 

https://fontawesome.com/start

 

 以下のコードを<head></head>内に貼り付ける事で利用できます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

 

現時点では、バージョンは v5.7.2 となっています。

https://use.fontawesome.com/releases/v5.7.2/css/all.css

バージョンアップがあり、新規フォントが追加された時に新しいフォントを使いたい場合は、このバージョン部分の数字を変更する必要があります。

 

アイコンフォントを選ぶ

Font Awesomeフリーフォント

上記リンクより、使いたいフォントを選びます。

 

 選択すると、アイコン詳細画面が開きます

 

 上にコードが出ていますのでクリックするとコピー出来ます

 

よく使うアイコンなどは以下からもコードのコピー可能ですのでご利用下さい。

 

メニューの編集

 

 「外観」→「メニュー」から編集します。

5452_02

 

 アイコンフォントを表示したいメニューを選択します。

5452_03

 

 対象の項目を開きます。

5452_06

 ナビゲーションラベルの部分にアイコンフォントのコードを挿入します。

5452_04

 

 【例】
<i class="fab fa-wordpress-simple">&nbsp;</i>

5452_05

 

アイコンの色を変えたい場合

以下を追記する事で可能です。

 style="color: #ffffff"

 

 【例】
<i class="fab fa-wordpress-simple" style="color: #ffffff">&nbsp;</i>WordPress

 

5452_01

文字なしでアイコンのみも可能ですし、文字の前後にアイコンを入れる事も可能です。

 

色の変更には以下もご利用下さい。

 色別カラーコード

マカロンビビッドパステル和色セーフ色名 配色パターンサンプル

 

 

以上です☆