allWebクリエイター塾　受講の評価、感想、講義内容を綴ったブログ: Fontelloのアイコンフォントを使ってみよう

こんにちは、allWebクリエイター塾生digidog（デジドッグ）です。

レスポンシブWebデザインで制作する場合、データの軽量化や、画面解像度によって表示がそこなわれないように配慮する事が大事です。そこで、アイコンなどはなるべく画像を使わずに、データも軽く解像度が違ってもきれいに見える、アイコンフォントをうまく利用してきたいと思い、勉強してみました。

今回は無料でアイコンフォントを提供している「Fontello」を利用し、使い方を詳しく紹介していきます。

アイコンフォントって？

アイコンフォントって何となく解るけど説明するって難しいので調べてみました。「アイコン」と「フォント」それぞれの意味はわかりますね。アイコンであり、フォント？。要するに、1文字として、文字の特徴を持ちながらも、見た目は文字ではなく絵柄が表示されるフォントの事と理解しました。

絵柄だけど画像ではなくフォントですから、アイコンフォントのメリットとして、

データが画像より軽い
HTTPリクエストが少なくて済む
拡大縮小しても表示はきれい

便利ではありますが、何かの原因によって表示されなかった場合の対策も必要ですね。

まずはフォントを選んでみよう

Fontello　　http://fontello.com/

たくさんフォントがありますね。練習に３個ほどアイコンを選びます。選択したアイコンフォントが赤枠で表示されます。

管理しやすいようにカスタマイズしよう！

「Customize Names」タブを選択
アイコンフォントを設置したいコンテンツにつけるclass名をカスタマイズ出来ます。
設定ボタンからプルダウンメニューを出します。
アイコンフォントを使用するclass名の前後に共通のワードを付ける事も出来ます。「after icon name」にチェックを入れると、「後ろ」に入ります。特に挿入しない場合はデフォルトの「icon-」が入ります。
赤い「Download webfont(3)」の横にある枠に「フォント名」をいれると、デフォルトは「fontello」ですがこれも自由に設定出来ます

④に入力しているそばからワードが入っていきました。

キーコードのカスタマイズ

「Customaize codes」タブを選択。アイコンフォントを設置する為、HTMLに挿入する文字（一文字）キーコードを自由に編集する事が出来ます。環境の違いでアイコンフォントが表示出来なかった場合はこの文字が表示されますので、アイコンに似た表現の文字を当ててみました。

アイコンフォントの上に割り当てたい文字を入力すると、下のUnicodeが変更されます。Unicodeを直接入れても変更できます。ちなみにUnicodeが対応していれば、漢字一文字入れる事も可能です。

早速ダウンロード！

準備ができたら、ダウンロードボタンを押します。

ダウンロードしたファイルがこちら。zipファイルを解凍して、使うのは主にこちらのファイルです。これでアイコンフォントの準備は整いました。

アイコンフォントを入れてみよう！

アイコンを表示するためには、HTMLにここで設定した文字を記述する必要があります。しかし、コンテンツに無意味な文字を記述するのは、適正なHTMLとは言えませんので、サンプルでは疑似クラス「befor: 」を使って挿入して行きます。

アイコンフォントを入れたい要素に先ほど設定したclassを付け、先ほどの「allweb.css」からフォント設定に必要な部分を記述します。

　

 ×3個
 チェックを入れましょう
 検索はこちら

　

@font-face {
  font-family: 'allweb';
  src: url('../font/allweb.eot?67896220');
  src: url('../font/allweb.eot?67896220#iefix') format('embedded-opentype'),
       url('../font/allweb.woff?67896220') format('woff'),
       url('../font/allweb.ttf?67896220') format('truetype'),
       url('../font/allweb.svg?67896220#allweb') format('svg');
  font-weight: normal;
  font-style: normal;
}
 [class^="curriculums-"]:before, [class*=" curriculums-"]:before {
  font-family: "allweb";
  font-style: normal;
  font-weight: bold;
  color: white;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  background-color: #158d19;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-right: .5em
}
.curriculums-star:before { content: '\661f'; } /* '星' */
.curriculums-ok-circled:before { content: '\2228'; } /* '∨' */
.curriculums-search:before { content: '\25ef'; } /* '◯' */

ul>li{ display: inline; margin-right: 2em}

ダウンロードしてきたcssを見ると、「content: '\661f';」内の数字の部分が文字化けしてる場合がありますが、化けたままコピペしても、アイコンは表示されます。

プレビューするとこんな感じ

うまく表示されました。ちなみに表示出来なかった場合はUnicodeの方が表示されます。

アイコンフォントの管理は「Fontello」でしちゃおう！

ダウンロードしたデータに、「config.json」というファイルがあります。先ほど選んだアイコンの図柄やアイコンフォント名、class、割当文字の設定情報がはいってますので、これをfontelloサイトの設定タブ、プルダウンメニュー「import config」から読み込みます。

ダウンロードしたときの情報が再現されますので、この状態の画面からアイコンの増減やclass名など編集し、再度ダウンロードすると、新しく編集し直したフォントセットを作る事が出来ます。

まとめ

手順のポイントをまとめてみました。

コンテンツに最適なフォントを選ぶ
フォント管理がしやすいように名前を工夫する
アイコンフォントを表示されなかった場合の文字設定をする
HTMLには直接記述しないで、疑似クラスを利用する

プロジェクトごとに常に最新の「config.json」を管理していれば、メンテナンスをする場合に情報を共有できていいかもしれませんね。

最後に

レスポンシブWebデザインでの画像の扱いを必要最低限にする事は必須です。

HTML5ではimg要素のalt属性値の書き方も変更になり、入れる内容を考えるだけでも結構大変ですから、画像を入れた場合は作業時間が大幅にとられる事になります。さらにデータも重く、画面解像度などの環境の違いによって鮮明に表示されない状態もでてきます。

ここはやはりアイコンフォントをうまく活用して、わかりやすく素敵なサイトをデザインにしていきたいですね。

アイコンフォントは自分でも作る事が出来ます。今月8月18日にはallWebクリエイター塾主催のSwapSkills doubbble10【「伝える」を掘り下げるインフォグラフィックス】という勉強会もあります。魅力的なアイコンを作れるように勉強するのもいいかもしれませんね。

allWebクリエイター塾　受講の評価、感想、講義内容を綴ったブログ

2013年8月6日火曜日

Fontelloのアイコンフォントを使ってみよう