読者です 読者をやめる 読者になる 読者になる

ELLY'S HATENA BLOG

Webデザイナーellyのデザインとゆるふわな日常。

「Fontello」を使ってアイコンフォントを簡単につかうレシピ!

少し遅ればせながら、アイコンフォントを積極的に取り入れたいと思い、ラフで1枚画として見せるとき...実際コーディングしてブラウザ上で見せるとき...など一連の流れがよくわかっていなかったので、まとめてみました。

Fontelloってなぁに

fontello.com

Fontelloとは、よく使われている「Font Awesome」からアニメーションアイコンが含まれている「Fontelico」、またミニマムで女性向けのサイトで使えそうな「Entypo」など、おおよそ14個のアイコンフォントが網羅されているwebサービスです。

1人でデザインからコーディングまでされる人が殆どかなぁ...と思うので、アイコンフォントだったら、インブラウザデザインで確認してもらえば良いんじゃないかと思いますが、分業制だと、コーダーさんに確認してもらうには、まずPhotoshopでデザイン全体の確認をしてもらって、部分的にここをアイコンフォントにしてほしいなど要望をお伝えするフローになるかと思います。

では実際の使い方を見てみましょう

まず、Select Iconsというタブから自分の使いたいアイコンフォントを選び、それから「Download webfont」をポチっとします。 f:id:elly_elly:20160607152031j:plain

落ちてきたzipデータにはこんな感じでファイルが格納されています。
f:id:elly_elly:20160607195103p:plain

まずは「font」のフォルダーの「fontello.ttf」ファイルを開いてフォントをインストールします。
demo.htmlには、今回使おうと、選んできたアイコンフォントの一覧表があるのでこちらを開きます。 ここのアイコン部分をコピー
f:id:elly_elly:20160607195815g:plain

Photoshopを立ち上げてフォントでペーストします。バツじるしがでても気にしない。
f:id:elly_elly:20160607200902j:plain

フォントファミリーを選ぶところから、先ほどインストールした「fontello Regular」を選びます。 f:id:elly_elly:20160607201034j:plain

これでPhotoshopでのアイコンフォント表示ができました!

次はコードの中で使用してみよう

先ほどダウンロードしたフォルダー内は左のように色々格納されておりましたが、実際コードで使用する際は右側のように、htmlが一つ、cssが「fontello.css」とアニメーションアイコンを使用してるときは「animation.css」を格納しておきます。 f:id:elly_elly:20160608170204j:plain

htmlに「fontello.css」のリンクを(アニメーションアイコンを使っているときは「animation.css」も)headerに書きます。

<link rel="stylesheet" type="text/css" href="css/fontello.css" >
<link rel="stylesheet" type="text/css" href="css/animation.css" >

アイコンはだいたい、文字や何かしらに付随して使われることが多いので、下記のように擬似要素を使って表示させる書き方をしました。

<p class="icon-emo-happy">アイコンフォントだよ</p>

cssは下記のようなかんじです。
実際はデフォルトで「fontello.css」に、自分が選択したアイコンのスタイルが一番下にずらずら記述されているので、使いたいアイコンのクラス名をつけるだけです。

.icon-emo-happy:before { content: '\e800'; } 

アニメーションアイコンには「animate-spin」というクラス名を忘れずに! あと上記のような書き方をすると文字まで一緒に回ってしまうので、これはあまりしたくありませんが、下のように空白にして使ったほうが良いかもしれません。

<i class="icon-spin3 animate-spin"></i>

実際、デザインでもコーディングでも意外と簡単に使うことができました! ぜひぜひ試してみてくださいね。

ELLY'S HATENA BLOG © 2016. All Rights Reserved.