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

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

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...

fontawesome.com

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

現時点では、バージョンは　ｖ5.7.2　となっています。

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

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

アイコンフォントを選ぶ

Font Awesomeフリーフォント

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

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

よく使うアイコンフォントのコード７４選まとめでサクっとコピー

「Font Awesome」のフリーフォントです。 なんとフリーのものだけで1,500もあるので、よく使う、または使えそうなアイコンフォントのコードをまとめまています。 このページではよく使いそうなものに絞って７１個載せています。 Font...

ayaito.net

2019.02.27

SNSなどのカラーコードとアイコンフォントまとめ

Twitter・Facebook・LINE・Instagram・YouTube・Tumblr・LinkedIn・はてなブックマーク・feedly・RSS・mixi・Skype・Dropbox・Vimeo・Yahoo・Amazon・楽天・Wo...

ayaito.net

2019.02.26

メニューの編集

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

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

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

 style="color: #ffffff"

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

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

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

マカロンビビッドパステル伝統色和色セーフ色名 赤桃青紫黄橙緑茶黒 配色パターンサンプル

以上です☆