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

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

アイコンフォントの紹介

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

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

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

1. ウェブサイトにアクセスし、右上でログインします。
2. お気に入りのアイコンを選び、カートボタンをクリックしてコレクションに追加します。
3. 右上のカートボタンで、プロジェクトに追加します。
4. プロジェクト名を作成し、確定します。
5. コードをコピーし、サイトのCSSファイルに追加します。
6. Frontendではliタグを使用してアイコンを参照します。

Iconfontの具体的な使用方法：必要なアイコンを選び、ショッピングカートに追加します。選択が完了したら、ウェブページ右上のショッピングカートをクリックし、プロジェクトに追加します。プロジェクトを作成し、後でアイコンを追加したい場合は、直接プロジェクトに追加できます。確定するとコードが表示されるので、すべてのコードをコピーして、あなたのWordPress ThemeのCSSファイル内に追加します。追加方法がわからない場合は、テーマカスタマイズのカスタムCSSコードボックスに追加することもできます。次に、以下のCSSコードを追加して、クラスを定義します。

/* 定义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タグを追加してアイコンを呼び出します。

 class="iconfont">图标代码

   

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

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

次に、同様にiタグを使用してアイコンを呼び出します。

 fa-camera-retro

その他の使用方法は公式サイトを参照

WordPress Plugin方式

もしウェブページコードの追加に慣れていない場合は、直接使用することもできますWordPress Pluginの方法で実現できます。サーバーの性能が良ければ、Pluginを多くインストールしても問題ありません。例：Font AwesomeのインストールダウンロードURLインストール・有効化後、設定内で表示方法を設定できます。Webフォント方式で表示するか、SVGアイコンで表示するか。 使用時も同様にiタグで呼び出します：

また、PluginはShortcode呼び出しもサポートしています：

[icon name="stroopwafel"]

その他のアイコンフォント

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