全国1万2001人のファンのみなさま。
お疲れさまです。VAXだず。
昨日素敵なカップめんを見つけました。
それは、
CoCo壱番屋様監修の
CoCo壱番屋 辛口派に捧げる とび辛カレーラーメン (エースコック)
食べてみた感想は、確かに辛いが病み付きになるお味でした。
売り切れてほしくないので深くはコメントしませんが
CoCo壱番屋様ありがとうございます！！！！
ふう、、、
さて、本題ですが今日は使い勝手の良い
iconmoon の使い方をお土産においていきます。
では、、、、
１．ダウンロード
まずは
IcoMoon App - Icon Font, SVG, PDF & PNG Generator
こちらにアクセス
すると
このようにアイコンがズラーっと並んだ画面が出てきますので
使いたいものを選んで
ページ下部にある
Generate Font をここぞとばかりにクリック。
ちなみに他にも種類があるのですが、全てが無料ではありません。
ページ下部にある
Add Icons From Library…
をクリックすると アイコンをライブラリーから追加することができます。
ボタンにカートのアイコンがついてるやつ(Purchase)とかはクリックすると
使用するにはいくらでっせ 的な画面になるので。
例えば フリーの Hawcons を 追加(Add)した場合は
Adding.. となったあと
こんな感じで最初の画面の上部に追加されていきます。
話を戻して
Generate Font をクリックした後はフォントのダウンロードになるのですが
こんな感じでフォント名を変えることもできますので
変えてもいいし、変えなくてもいいです。
今回は home を VAX_home に変えてみます。
そしてページ右下にある
Font
Download をクリック。ここぞとばかりにクリック。
すると
iconmoon というフォルダがダウンロードされますので解凍します。
２．サーバーへアップロード
ダウンロードしたフォルダの中身はこんな感じです。
先にデモをお見せすると
demo
このように表示されます。
どのようにアップするかというと
今回の demo の場合は
このようなフォルダ構成となっています。
ダウンロードしたばかりの style.cssの中身は
こんな感じになっているので
fontsフォルダのパスに注意して必要なら style.css を修正してサーバーにアップします。
htmlの方では
demo
のソースを見ていただいたら分かると思いますが
<span class="icon-VAX_home"></span>
こんな感じで icon-アイコン名 っていう classを名をつけて記入します。
今回の場合だとこんな感じで使うとばっちりアイコンが表示されているはずです。
うまくいかない場合はファイルのパスが間違っている可能性があるのでお気をつけください。
ちなみに cssで記述アイコンフォントなので 大きさや色も変えることが出来ます。
.icon-VAX_home:before {
content: "\e900";
color: red;
font-size: 40px;
}
こんな感じで style.css の中身を修正すると
こんな感じでやりたい放題です。
まとめ
いかがでしたでしょうか？
こういったものを使うと
画像数を減らしてサーバーの不可を抑える。(サーバーへの気遣い)
デザイナーの負担を減らしてあげる。(デザイナーへの気遣い)
などメリットがありますのでぜひ取り入れてみてください。
今日はタイミングあえば御礼もかねてCoCo壱に行ってきます。
では。
