blog

BLOGブログ

ARCHIVES

VAX

アイコンフォントを使ってみんなに優しくなろう。 iconmoonの使い方編

20160413_001

 

 

 

 

全国1万2001人のファンのみなさま。

お疲れさまです。VAXだず。

 

 

昨日素敵なカップめんを見つけました。

それは、

 

CoCo壱番屋様監修の

CoCo壱番屋 辛口派に捧げる とび辛カレーラーメン (エースコック)

 

 

食べてみた感想は、確かに辛いが病み付きになるお味でした。

 

売り切れてほしくないので深くはコメントしませんが

 

CoCo壱番屋様ありがとうございます!!!!

 

 

 

 

 

 

ふう、、、

 

 

さて、本題ですが今日は使い勝手の良い

 

iconmoon の使い方をお土産においていきます。

 

では、、、、

 

 

 

1.ダウンロード

 

 

まずは

 

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

 

こちらにアクセス

 

すると

 

 

20160413_001

 

 

このようにアイコンがズラーっと並んだ画面が出てきますので

 

 

20160413_006

 

 

使いたいものを選んで

ページ下部にある

 

Generate Font をここぞとばかりにクリック。

 

 

ちなみに他にも種類があるのですが、全てが無料ではありません。

ページ下部にある

 

 

20160413_002

 

 

Add Icons From Library…

をクリックすると アイコンをライブラリーから追加することができます。

 

 

 

20160413_003

 

 

ボタンにカートのアイコンがついてるやつ(Purchase)とかはクリックすると

使用するにはいくらでっせ 的な画面になるので。

 

例えば フリーの Hawcons を 追加(Add)した場合は

 

 

 

20160413_004

 

 

 

Adding.. となったあと

 

 

 

20160413_005

 

 

こんな感じで最初の画面の上部に追加されていきます。

 

 

 

話を戻して

 

Generate Font をクリックした後はフォントのダウンロードになるのですが

 

 

 

 

20160413_007

 

 

こんな感じでフォント名を変えることもできますので

変えてもいいし、変えなくてもいいです。

 

 

今回は home を VAX_home に変えてみます。

 

 

 

20160413_008

 

 

 

そしてページ右下にある

Font

Download をクリック。ここぞとばかりにクリック。

 

 

 

すると

iconmoon というフォルダがダウンロードされますので解凍します。

 

 

 

 

 

 

2.サーバーへアップロード

 

 

 

20160413_009

 

ダウンロードしたフォルダの中身はこんな感じです。

 

 

 

先にデモをお見せすると

 

demo

 

このように表示されます。

 

 

どのようにアップするかというと

 

今回の demo の場合は

 

 

20160413_013

 

このようなフォルダ構成となっています。

 

 

ダウンロードしたばかりの style.cssの中身は

 

20160413_010

 

こんな感じになっているので

fontsフォルダのパスに注意して必要なら style.css を修正してサーバーにアップします。

 

 

 

htmlの方では

 

demo

 

のソースを見ていただいたら分かると思いますが

<span class=”icon-VAX_home“></span>

 

こんな感じで icon-アイコン名 っていう classを名をつけて記入します。

 

 

20160413_011

 

 

今回の場合だとこんな感じで使うとばっちりアイコンが表示されているはずです。

 

 

うまくいかない場合はファイルのパスが間違っている可能性があるのでお気をつけください。

 

ちなみに cssで記述アイコンフォントなので 大きさや色も変えることが出来ます。

 

.icon-VAX_home:before {
content: “\e900″;
color: red;
font-size: 40px;
}

 

こんな感じで style.css の中身を修正すると

 

 

20160413_014

 

 

こんな感じでやりたい放題です。

 

 

 

 

まとめ

 

 

いかがでしたでしょうか?

 

こういったものを使うと

 

画像数を減らしてサーバーの不可を抑える。(サーバーへの気遣い)

デザイナーの負担を減らしてあげる。(デザイナーへの気遣い)

などメリットがありますのでぜひ取り入れてみてください。

 

 

今日はタイミングあえば御礼もかねてCoCo壱に行ってきます。

では。

 

 

 

この人が書いた記事

VAXの記事をもっと見る

関連する記事