アイコンフォントを試してみました

アイコンフォントとは、一応書いておくとアイコンをフォントデータ化して、サイトのアイコンをウェブフォントで表示するやり方及びそのフォントのこと、と理解しています。

まずはアイコンデータが含まれるウェブフォントを用意する必要があります。本来はそのデータを作成するところからなのですが、アイコンを選択してフォントデータにして利用できるウェブサービスがいくつかあるので、それを利用しました。

今回利用したのは以下のサイトです。(日々チェックしているphpspot開発日誌さんで紹介されていました。)

Create Your Icon Fonts – Free icon Vectors – Fontastic


こちら、アクセスしてメールアドレスとパスワードを登録すると、すぐにアイコン選択画面が表示されます。

Fontastic

アイコンの作者ごとに一覧で表示されており、各アイコン群の右上(赤枠)にライセンスについて書いてありますので、使用の際は確認が必要かと思います。

使用したいアイコンをクリックして選択し、選び終えたら上部メニューのCUSTOMIZEを押すと、カスタマイズの画面に映ります。ここで、実際サイトにアイコンを挿入する際用いる文字列(と言うよりどの文字のフォントとして使用するか?)を指定します。

Fontastic2

スクロールして画面下に行くと、CSSで充てるクラスを指定できます。

Fontastic3

アイコンの設定方法として、文字列として指定する方法と、cssのclassを充てて指定する方法があるのですが、文字列で指定する場合には前者の設定、classで指定する場合には後者の設定を使うようです。

設定がすんだら、上部メニューのDOWNLOADを押すと、ダウンロードボタンがあるページに遷移し、ファイル一式をダウンロードできます。


ダウンロードページに設置の方法も書いてあります。本来ならウェブフォントとして設定してあーだこーだとやる必要があると思うのですが、ファイル一式に必要ファイルが全て含まれているので、今回はそれを使用して設置してみます。

zipを解凍すると、以下の構成でファイルが格納されています。

[fonts]
–untitled-font-1.eot
–untitled-font-1.svg
–untitled-font-1.ttf
–untitled-font-1.woff
icons-reference.html
styles.css

icons-reference.htmlは、どんな設定で書き出したかを記録したHTMLで、設置には必要ありません。それ以外のファイルを、自分のプロジェクトにコピーします。

フォント群に名前をつけることができるようなのですが、今回何もつけずに進めたらフォントファイル名がこうなりました・・・フォント名は、選択画面にて入力できるようです。

styles.cssがfontsフォルダを参照して表示するようですので、styles.cssとfontsフォルダの位置関係は維持するか、styles.css内での相対パスを実際の構成にあわせて書き直す必要があります。

今回僕は文字として設定しましたので、以下、その前提で設定方法をまとめます。


Copy this CSS Code to your website stylesheet:

Or add the CSS file “styles.css” to your project, and link to it from your HTML page.

と書いてあるとおり、styles.cssに含まれる記述をなんらかの形でサイトに加えます。今回僕はstyles.cssのファイル名を変更し、ヘッダでcssファイルとして読み込みました。


Insert the “data-icon” attribute into any HTML tag to add the icon:

次に、使用したい要素にdata-iconという属性を加え、使用するアイコンを指定します。この際指定する文字は、ダウンロード時に設定した文字となります。例えばProfileという文字列を内包するh3タグにpという文字として指定したプロフィールアイコンを指定する場合は、以下のような記述となります。

設定されたアイコンは、指定した要素に内包される要素の先頭に追加されます。

profile

以上で設置は完了です。表示したい箇所ごとに、表示したいフォントをdata-iconとして指定してやればOKです。

WordPressで使用する場合

さて、今回のこの方法で、このサイトのいくつかの箇所にアイコンを表示してみたのですが、wordpressで使用する場合、html一式をパーツとして書き出す事も多いため、僕の場合は若干カスタマイズが必要でした。

ページ遷移のナビ

ページ単位で遷移するナビは、標準のprevious_post_linkなどを用いていたのですが、それだとaタグ以下を全てまとめて書き出してしまい、中に使用する文字列を指定はできるものの、その他の属性は指定できません。そこで、隣接ポストのデータを取得してリンクを生成する形に書き直しました。

ネクストリンクも同様の手法で生成しました。get_adjacent_postの3つめのパラメータにfalseを指定すると、次のポストを取得できます。

ウィジェットタイトルへの適用

ウィジェットタイトルは自動で生成するような設定にしていて属性を書き込むのが難しかったため、jQueryを使用しました。

Profileを内包するh2タグを指定して、内包する要素の先頭にspanでアイコン要素を追加しています。直接h2タグに指定する事も可能ですが、別にしたほうがフォント指定などが容易なため、今回はこのような形にしています。