WordPressに『はてなブックマーク』や『LINE』などのアイコンフォントを追加する方法

add-hatebu-icon

こんにちは。お久しぶりです。

多忙のため長らく更新できていませんでしたが、更新を再開します。

サイトデザインも一新しました。

 

更新していない期間にいろいろな経験をし、スキルアップしてきたのでより一層有益な情報を皆様にお伝えできると思います。お楽しみ下さい。

よろしくお願いします。

 

さて、今回は、『はてなブックマーク』や『LINE』などのアイコンフォントを追加する方法をご紹介します。

 

多くのアイコンフォントセットには、はてなブックマークなどの日本製サービスのアイコンが用意されていません。

だからといってはてなブックマークやLINEのアイコンだけ画像を利用するのは嫌ですよね。

 

今回の方法を使えば簡単にはてなブックマークやLINEなどのアイコンフォントを貴方のWordPressに導入することが出来ます。

 

SVGファイルを用意する

アイコンを追加するためにSVGファイルを用意する必要があります。

今回は、こちらのサイト様で配布されていたものを使用させていただきました。

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

 

 

IcoMoonでアイコンフォントを作成する

icomoon1

 

 

今回は、『IcoMoon』というアイコンフォントを作成するサービスを利用します。

IcoMoonはSVGファイルをフォント化させることができます。左上の『Import Icons』をクリックして先ほど拝借したSVGファイルを選択します。

 

icomoon2

 

 

アイコンが選択されているのを確認したら右下の『Generate Font』をクリックします。

 

 

icomoon3

 

アイコンフォント化するアイコンが表示されるので問題がなければ右下の『Download』をクリックします。

 

icomoon4

 

 

 

 

アイコンフォントをアップロードする

ダウンロードされたファイルの構成は以下のようなものになっています。

icomoonフォルダーの中身 » 

icomoon5

fontsフォルダーstyle.css以外を削除します。

 

削除したらicomoonフォルダーを任意の場所にアップロードします。

 

今回は、1例としてWordPressテーマ内にアップロードします。

 

構成としては以下の様になります。

WordPressテーマ/

├style.css

├index.php

~略~

icomoon/

│ ├fonts/

│ │ ├ icomoon.eot

│ │ ├icomoon.svg

│ │ ├icomoon.ttf

│ │ └icomoon.woff

│ └style.css

└ lib/

 

アップロードが終わったらheader.php内の<head>内に以下のように記載します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/icomoon/style.css">

これでアイコンフォントが使えるようになりました。

アイコンフォントを表示させるには以下のように記載します。

<i class="icon-○○"/>

 

○○には画像の赤枠の文字を記載して下さい。
icomoon6

 

 

まとめ



今回の方法を使えば、『はてブ』などのアイコンフォントセットに入っていないアイコンもアイコンフォントとして使用することが出来ます。

『はてブ』は日本では結構重要なサービスなので、「アイコンフォントがない」という理由でシェアボタンを設置していない方は、今回ご説明した方法で導入してみて下さい。

expand_less