賢威7でWebアイコンフォントを実装する方法として「Font Awesomo」を利用する方法をご紹介しました。

関連記事賢威7でWebアイコンフォント「Font Awesome」を実装する方法

ただ、Font Awesomoでは、「はてなブックマーク」「LINE」「feedly」のアイコンがありませんので、別な手段で実装する方法をご紹介します。

「はてなブックマーク」「LINE」「feedly」のWebアイコンフォントを作成する方法が分かりやすいサイトをご紹介

今回ご紹介する方法は以下のサイトを参考にしています。とても分かりやすいです。

参考アイコンフォントでLINE、はてなブックマーク、feedlyを作ってみる

SVGファイルを入手する

Webアイコンフォントは「IcoMoon App」という海外のWebサービスを利用しますが、アイコンの元となる「SVGファイル」が必要です。

SVGファイルは以下のサイトで配布されていましたので、ご紹介します。

参考ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい!

上記ページの画面下部の方に「SNSボタンセットをダウンロードする」というテキストリンクがありますので、クリックしてSVGファイルをダウンロードします。

ファイル名は「SNS_svg_file.zip」ですので、解凍しておいてください。

icomoon.zipをダウンロードして解凍

前述の「アイコンフォントでLINE、はてなブックマーク、feedlyを作ってみる」を参考にしながら、先ほどダウンロードしたSVGファイルを使ってWebアイコンフォントをダウンロードします。

ダウンロードしたファイル名は「icomoon.zip」ですので、解凍します。

Webアイコンフォントをサーバーにアップロード

解凍すると「icomoon」というフォルダが出来ますので、フォルダを開いたのち、不要な以下のファイルやフォルダを削除します。

  • 「demo-files」フォルダ
  • demo.html
  • Read Me.txt


「icomoon」フォルダの中身は以下のようになります。

  • 「fonts」フォルダ
  • selection.json
  • style.css


以上まで確認できましたら「icomoon」フォルダをサーバーにアップするのですが、私の場合は、サーバーのルートに「font」ディレクトリを作成し、そこにアップしています。

ちなみに「Font Awesomo」も同じディレクトリにアップして運用しています。

フォント関連はこのディレクトリに格納するという自分ルールの上、運用しているのですが、管理がしやすくなります。

賢威7に「icomoon」を読み込ませる

「icomoon」フォルダをアップしたら、賢威7に「icomoon」を読み込ませます。

設定の手順

  • WordPressの管理画面で左サイドバーにある「賢威の設定」より「賢威の設定」をクリック
  • 画面下部にある「</head> 直前に挿入するコード記入欄」に「icomoon」のCSSを読み込むための記述をする

記述内容は以下の通り。

<link href="/font/icomoon/style.css" rel="stylesheet">

パスは当サイトの場合ですので、ご自分の環境に合わせて適宜修正してください。

なお、「Font Awesomo」のCSSもこの箇所で読み込ませているので、「</head> 直前に挿入するコード記入欄」には次のように記述されています。

<link href="/font/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/font/icomoon/style.css" rel="stylesheet">

<script>
※Googleアナリティクスのコード※
</script>

以上で「icomoon」の準備は完了です。

Webアイコンフォントを表示してみる

それでは実際に表示されるか試してみましょう。

icon-hatebu(e901)
icon-line(e902)
icon-feedly(e900)

左に「はてなブックマーク」「LINE」「feedly」のアイコンが表示されていますね。

なお、上記のソースは以下の通りです。

<span class="icon-hatebu"> icon-hatebu(e901)</span>
<span class="icon-line"> icon-line(e902)</span>
<span class="icon-feedly"> icon-feedly(e900)</span>

なお、「(e901)」等はスタイルシート等で表示設定をするための文字コードになります。

アイコンとはいえ、フォントですからね。