【WordPress】アイコンを利用できるプラグイン「WP SVG Icons」

WordPressの記事に無料でアイコンが使えるプラグインの「WP SVG Icons」を導入してみました。
SVG形式なのでCSSが適用できるのがまた嬉しいです。

まずは、プラグインを検索してインストールします。

wordpress svg icons plugin install

有効化すると、記事編集画面に「Add Icon」のアイコン挿入ボタンが現れますので、クリックします。

wordpress svg icons plugin add

そうすると、アイコンの挿入画面が出てきて、多数のアイコンを選べます。

wordpress svg icons plugin how-to

アイコンの選択後wrapを「h1, h2, h3, span, div, i, b」から選べますが、何もしなければ、デフォルトの「i」になります。その次に「Insert Icon」ボタンで挿入するか、Shortcodeを直接記事に貼り付けます。

[wp-svg-icons icon="wordpress" wrap="i"]

ブラウザで確認するとアイコンが表示されています。
⬇︎こちら


ソースコードを見てみると次のようなスタイルが適用されていましたので、font-siezやcolorを変えたい場合はここにCSSで指定すればいいですね。

ちなみに:beforeは、要素の直前に内容を挿入する擬似要素です。

さらに、わたしの場合はリンクにつけて、同時にホバーもさせて使いたかったので、次のようにaタグで囲いました。

文章とバランスを合わせるためにCSSで微調整しています。class=”icon_demo”はデフォルトのアイコンと分けるために付与しています。

これで⬇︎のようになりました。

WP SVG Icons Plugin

以上です!ありがとうございました!


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp