Widget Icon

Widget Iconは、ウィジェットのタイトルの横にアイコンを追加できるプラグインです。640種類以上のアイコンを利用できます。

このプラグインを利用すると「Font Awesome」と「Elusive」のアイコンフォントを自分のWebサイト上で簡単に利用できます。それに加え、手動でHTMLを記述すれば好きな位置にアイコンを表示することもできます。

自分のWebサイトのデザインが地味だなと感じたら、Webフォントのアイコンを利用してサイトを装飾しましょう。そうすることでWebサイトの印象が良くなります。

はじめに

このプラグインが優れている点

  1. ウィジェットのタイトルの横にアイコンを追加できる。(左側または右側)
  2. 手動でHTMLを記述すれば好きな位置にアイコンを表示できる。
  3. Font Awesome と Elusive のアイコンフォントを自分のWebサイト上で利用できる。アイコンの種類は640種類以上利用できる。
  4. アイコンの種類・サイズ・カラー・表示位置・余白などを自由に指定できる。

利用できるWebフォント

  1. Font Awesome
  2. Elusive

利用イメージ

ウィジェットのタイトルの左側または右側にWebフォントのアイコンを追加できます。

Widget Icon

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Widget Icon」で検索
  2. WordPress.org からダウンロード

ウィジェットの設定

管理画面の場所

このプラグインをインストールすると、ウィジェットの下の辺りに設定項目が追加されます。

WordPress管理画面 > 外観 > ウィジェット

ウィジェットの設定

アイコンの種類・サイズ・カラー・表示位置・余白などを自由に指定できます。

ウィジェットの設定

手動でアイコンを表示する場合

このプラグインを有効化すれば、WebフォントのCSSがヘッダーに追加されます。手動で下記のようにHTMLを記述すれば好きな位置にアイコンを表示することもできます。

Font Awesome

アイコンの種類の指定方法は、classに「フォント種類 + アイコン名前」を記述して呼び出します。アイコンの名前はウィジェットのアイコン選択画面に記載されている名前です。

<i class="font-awesome icon-apple"></i>
<a href="#"><i class="font-awesome icon-apple"></i>&nbsp;テキストリンク</a>

Elusive

アイコンの種類の指定方法は、classに「フォント種類 + アイコン名前」を記述して呼び出します。アイコンの名前はウィジェットのアイコン選択画面に記載されている名前です。

<i class="elusive icon-wordpress"></i>
<a href="#"><i class="elusive icon-wordpress"></i>&nbsp;テキストリンク</a>

まとめ

Widget Iconは、ウィジェットのタイトルの横にアイコンを追加できるプラグインです。640種類以上のアイコンを利用できます。

自分のWebサイトのデザインが地味だなと感じたら、アイコンフォントを利用してWebサイトを装飾しましょう。そうすることでWebサイトの印象が良くなります。

スポンサーリンク