WPサイトナビゲーションメニューへのアイコン追加方法_iconfont_Font Awesome

他のサイトのナビゲーションメニューにアイコンが付いているのを見たことがあるでしょう（もしご存知なければ、自分でサイトを構築する方法Naiba サイト構築ノートのトップページに戻ってナビゲーションをご覧ください。）、例えばホームには家のアイコン、購入ボタンの前にはショッピングカートのアイコン、設定ボタンの前には歯車のアイコンなどがあります。下の図で示すようなものです。では、このようなアイコン効果はどのように実現するのでしょうか？ 実はこれは単にアイコンフォントを導入しただけです。この記事では、WordPressやその他のサイトプログラムのメニューや任意の場所にアイコンを追加する方法を教えます。

アイコンフォントの紹介

アイコンフォントは、文字通り、フォントファイルそのものですが、すべてアイコンで構成されています。一部のモバイルアプリやウェブデザインでは、アイコンの使用がよくあります。初期のウェブデザインではアイコン画像ファイルを作成していましたが、異なる解像度によってアイコンがぼやけてしまうため、後にアイコン画像の代わりにアイコンフォントを使用するアプリケーションが登場しました。 アイコンフォントには有料のものも無料のものもたくさんあります。この記事では、よく使われる2つのアイコンフォントを紹介します：iconfontとFont Awesome

iconfontアイコンフォントの使用方法

Iconfontはアリババが作成したベクターアイコンライブラリで、ベクターアイコンのダウンロード、オンラインストレージ、フォーマット変換などの機能を提供しています。機能が強力でアイコンが豊富、しかも国内のプラットフォームなので、ネットワーク速度が速いです。Iconfontにアクセス Iconfontの使用手順：

1. ウェブサイトにアクセスし、右上でログインします。
2. 好きなアイコンを選び、ショッピングカートボタンをクリックしてコレクションに追加します。
3. 右上のショッピングカートボタンをクリックし、プロジェクトに追加します。
4. プロジェクト名を作成し、確定します。
5. コードをコピーし、サイトのCSSファイルに追加します。
6. フロントエンドで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>

   

Font Awesomeアイコンフォントの使用方法

Font Awesomeにはいくつかのウェブサイトがありますが、ここではhttp://fontawesome.dashgame.com/を例に挙げます。使用方法は以下の通りです： テーマのheader.php（他のサイトではウェブページのヘッダーコード）に以下のコードを追加します：

<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のインストールダウンロードリンクインストール・有効化後、設定内で表示方法を設定できます。Webフォント方式で表示するか、SVGアイコンで表示するかです。使用時も同様にiタグで呼び出します：

<i class="fas fa-stroopwafel"></i>

また、プラグインはショートコードでの呼び出しもサポートしています：

[icon name="stroopwafel"]

より多くのアイコンフォント

アイコンフォントは、本記事で紹介したiconfontとFont Awesome以外にも、多くの利用可能なものがあります。必要に応じて選択してください。fontellohttp://fontello.com/ オンラインであなた自身のアイコンフォントライブラリをカスタマイズできます。GitHubからアイコンセット全体をダウンロードすることも可能で、このプロジェクトはオープンソースです。icomoonhttp://icomoon.io/app/#/select オンラインでSVG形式のフォントをインポートし、編集してからダウンロードして使用できます。とてもクールです！Glyphicon Halflingshttp://glyphicons.com/ このアイコンフォントはBootstrap下で無料で使用できます。200以上のアイコンが標準で付属しています。Dashiconsアイコンフォント https://blog.naibabiji.com/skill/wordpress-user-dashicons.htmlWordPress管理画面に標準搭載されているフォントで、直接使用できます。以上がwpブログでメニューにfontawesomeアイコンを追加する方法のすべての内容です。さっそくあなたのサイトメニューにアイコンを追加しましょう。