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

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

 


 

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リンクを貼る

 

Get Started instantly With 1,000+ Free Icons | Font Awesome
Get vector icons and social logos on your website with the web's most popular icon set and toolkit. Always open source a...

 

以下のコードを<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フリーフォント

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

 

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

 

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

 

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

よく使うアイコンフォントのコード74選まとめでサクっとコピー
「Font Awesome」のフリーフォントです。 なんとフリーのものだけで1,500もあるので、よく使う、または使えそうなアイコンフォントのコードをまとめまています。 このページではよく使いそうなものに絞って71個載せています。 Font...
SNSなどのカラーコードとアイコンフォントまとめ
Twitter・Facebook・LINE・Instagram・YouTube・Tumblr・LinkedIn・はてなブックマーク・feedly・RSS・mixi・Skype・Dropbox・Vimeo・Yahoo・Amazon・楽天・Wo...

 

メニューの編集

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

 

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

 

対象の項目を開きます。

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

 

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

 

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

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

 style="color: #ffffff"

 

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

 

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

 

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

色別カラーコード

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

 

 

以上です☆

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています