icomoonを利用して賢威（けんい）にアイコンを追加する方法

※当サイトにはプロモーションが含まれています。

にゃのらいと

賢威に用意されている以外のアイコンを追加したいにゃ

ワードプレス（WordPress）テーマの賢威では、21種類のアイコンが用意されています。

しかし、このアイコン数だけでは足りない人もいるのではないでしょうか？

その為、今回は、アイコンを追加して賢威で使える様にする方法についてまとめてみました。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

賢威にアイコンを追加する際の注意点（補足説明）

賢威のサポートサイトでは、アイコンを追加する方法について以下の様に記載されています。

賢威8で用意しているアイコンは「IcoMoon」というサービスを利用してウェブフォントにしています。
もし変更したい場合は、このサイトに登録し、賢威8のアイコンをインポートした上で、アイコンを追加したり、差し替えたりするなどしてご対応ください。

この方法で追加すると、親テーマの「fonts」フォルダを上書きする必要があります。

ただ、親テーマは上書きしたくないので、今回は子テーマに対して変更を加えていきます。

なお、最低限のカスタマイズ方法となりますので、ビジュアルエディタｰにアイコンが表示されるようにはなりませんので、ご了承ください。

もし、数多くのアイコンを追加したい場合は、ワードプレスのプラグインである「Font Awesome」を使った方がいいと思います。

にゃのらいと

それなら、最初から「Font Awesome」を使えばいいにゃ

にゃテック

そうすると使わないアイコンも読み込まれる様になるので、その分動作が遅くなるにゃ

IcoMoonを使ってアイコンを追加する方法について

賢威で用意されているアイコンは「IcoMoon（アイコムーン）」というサービスを利用しています。

その為、同じサービスを使用して、アイコンを追加したいと思います。

なお、このサイトでは、賢威で説明をしていますが、他のワードプレステーマ及び、通常のサイト（HTML+CSS）でも同様の方法で、アイコンを追加できます。

①IcoMoon（アイコムーン）に移動する

IcoMoon（アイコムーン）のサイトにアクセスします。

【公式】IcoMoon-Freeに移動する

Free（無料）で使えるアイコンの一覧が表示されたと思います。

②使用したいアイコンをダウンロードする

使用したいアイコンをクリックして選択します。

ページ下方に「Generate Font」という箇所があるので選択します。

すると、選択したアイコンが表示されダウンロードできるようになります。

「Download」ボタンでダウンロードしましょう。

なお、それぞれのアイコンの上にカーソルを合わせると「<> Get Code」という項目が表示されるので選択します。

すると、このアイコンを表示（使用）するコードが表示されます。

今回、利用するのは、HTMLのみです。

追加するアイコンのコードをコピペして、メモ帳などに控えておきましょう。

③icomoonフォルダの作成

ダウンロードしたフォルダの中で必要なファイルが、「fontsフォルダ」、「style.css」です。

「icomoon」という名称のフォルダを作成し、その中に「fontsフォルダ」と「style.css」を移動させます。

④icomoonフォルダをアップロード

（WinSCPやFileZillaなどの）FTPソフトを使用して、ローカルホスト（自分のパソコン）から、「icomoon」フォルダを子テーマにアップロードします。

なお、フォルダの構成は、概ね下記のようになっていると思います。

/home/（あなたが契約した名前）/www/（あなたが作成したフォルダ名）/wp-content/themes/keni8-child/

※今までカスタマイズをしていなければ、子テーマの中身はもっと少ない状態です

⑤賢威の埋め込みコード設定

アップロードしたフォルダ内のファイルを参照（読み込む）するために、次のようにリンクを貼ります。

<link rel="stylesheet" href="https://（あなたのドメイン名）/wp-content/themes/keni8-child/icomoon/style.css">

上記の記述内容を、賢威の設定 > 埋め込みコード設定 にある「</head>直前に挿入するコード記入欄」に記述して、保存（更新）します。

⑥アイコンの記述方法

追加したアイコンを記述する際は、先程、メモ帳に貼り付けておいたコードを記載します。

アイコンの記述コード例

<span class="icon-pencil2"></span>
<span class="icon-play"></span>
<span class="icon-files-empty"></span>
<span class="icon-bubbles"></span>

実際に記載すると下記のように表示されます。

なお、ワードプレスで記述する際には、ビジュアルではなく、テキストに記載する必要があります。

また、ワードプレスのビジュアル画面には、アイコン自体が表示されないのでご注意ください。

以上、icomoonのサービスを利用して、賢威（けんい）にアイコンを追加する方法でした。

ご支援のお願い
この記事が役に立ったと感じたら･･･

この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下のリンクから“楽天”や“Amazon”でお買い物をしていただけると嬉しいです。

ご購入いただいた金額の一部（1～3％程度）が私に入り、より多くの有益な記事を作るための励みになります。

楽天でのお買物はこちら

Amazonでのお買物はこちら