他のサイトのナビゲーションメニューにアイコンが付いているのを見たことがあるでしょう（もしご存知なければ、自分でサイトを構築する方法Naiba サイト構築ノートのトップページに戻ってナビゲーションをご覧ください。）、例えばホームには家のアイコン、購入ボタンの前にはショッピングカートのアイコン、設定ボタンの前には歯車のアイコンなどがあります。下の図で示すようなものです。
では、このようなアイコン効果はどのように実現するのでしょうか？
実は、これはアイコンフォントを導入しているだけです。この記事では、WordPressやその他のサイトにアイコンフォントを追加する方法を説明します。サイトプログラムのメニューや任意の場所にアイコンを追加する方法を教えます。
アイコンフォントの紹介
アイコンフォントとは、文字通りフォントファイルですが、中身はアイコンです。スマホアプリやWebデザインでよく使われます。初期のWebデザインではアイコン画像ファイルを使用していましたが、解像度の違いによりぼやける問題があったため、アイコン画像の代わりにアイコンフォントが使われるようになりました。
アイコンフォントには有料・無料のさまざまな種類があります。この記事では、よく使われる2つのアイコンフォント、iconfontとFont Awesomeを紹介します。
iconfontアイコンフォントの使用方法
Iconfontはアリババが作成したベクターアイコンライブラリで、ベクターアイコンのダウンロード、オンラインストレージ、フォーマット変換などの機能を提供しています。機能が強力でアイコンが豊富、しかも国内のプラットフォームなので、ネットワーク速度が速いです。
Iconfontの使用手順：
- ウェブサイトにアクセスし、右上でログインします。
- 好きなアイコンを選び、ショッピングカートボタンをクリックしてコレクションに追加します。
- 右上のショッピングカートボタンをクリックし、プロジェクトに追加します。
- プロジェクト名を作成し、確定します。
- コードをコピーし、サイトのCSSファイルに追加します。
- フロントエンドでliタグを使用してアイコンを参照します。
Iconfontの具体的な使用方法：
必要なアイコンを選び、ショッピングカートに追加します。
選択が完了したら、ウェブページ右上のショッピングカートをクリックし、プロジェクトに追加します。
プロジェクトを作成します。後でアイコンを追加したい場合、直接プロジェクトに追加できます。
確定するとコードが表示されるので、すべてのコードをコピーし、あなたのWordPressテーマCSSファイルに追加します。追加方法がわからない場合は、テーマカスタマイズのカスタムCSSコードボックスに追加することもできます。
次に、以下のCSSコードも同様に追加し、classを定義します。
/* 定义class */ .iconfont{ font-family:"iconfont" !important; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
次に、アイコンを表示したい場所（例えばメニュー）に戻り、ナビゲーションタグにiタグを追加してアイコンを呼び出します。
<i class="iconfont">图标代码</i>
Naiba ヒント：
また、Font classの内容をテーマのページheader.phpファイルに追加することもできます。上記の追加方法とどちらか一方を選択してください。コードは以下の通りです：
<link rel='stylesheet' href='你的iconfont Font class代码' type='text/css' media='all' />
Font Awesomeアイコンフォントの使用方法
Font Awesomeにはいくつかのサイトがありますが、ここではhttp://fontawesome.dashgame.com/を例にします。使用方法は以下の通りです。
テーマのheader.php（他のサイトではページのhead部分）に以下のコードを追加します。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
そして同様にiタグを使用してアイコンを呼び出します。
<i class="fa fa-camera-retro"></i> fa-camera-retro
より多くの使用方法は公式サイトを参照
WordPressプラグイン方式
もしウェブページコードの追加に慣れていない場合は、直接WordPressプラグインを使用して実現することもできます。サーバーの性能が良ければ、プラグインを多くインストールしても問題ありません。
例えばFont Awesomeのインストール
インストールして有効化すると、設定で表示方法（webfont表示かSVGアイコン表示か）を選択できます。
使用時は同様にiタグで呼び出します。
<i class="fas fa-stroopwafel"></i>
また、プラグインはショートコードでの呼び出しもサポートしています：
[icon name="stroopwafel"]
より多くのアイコンフォント
アイコンフォントは、本記事で紹介したiconfontとFont Awesome以外にも、多くの利用可能なものがあります。必要に応じて選択してください。
fontello
http://fontello.com/
オンラインで独自のアイコンフォントフォントライブラリをカスタマイズできます。GitHubからアイコンセット全体をダウンロードすることも可能です。このプロジェクトはオープンソースです。
icomoon
http://icomoon.io/app/#/select
SVG形式のフォントをオンラインでインポートし、編集してダウンロードして使用できます。とてもクールです！
Glyphicon Halflings
http://glyphicons.com/
このアイコンフォントはBootstrapで無料で使用できます。200以上のアイコンが含まれています。
Dashiconsアイコンフォント
https://blog.naibabiji.com/skill/wordpress-user-dashicons.html
WordPress管理画面に標準搭載されているフォントで、そのまま使用できます。
以上がwpブログでメニューにfontawesomeアイコンを追加する方法のすべての内容です。さっそくサイトのメニューにアイコンを追加しましょう。