あー、これいいわ！アイコンフォントを使ってみたら思いの外手軽にグラフィカルな選択肢が増えるよ

超お手軽に見た目を改造できますね。

t F f E e R r 0 % 5 ! 1

これ全部文字です@shintarowfreshです。
ソースで見てもらえばわかると思うんですが、こんな感じです。

<span style="font-size:30px;" class="icon">t F f E e R r 0 % 5 ! 1</span>

当然CSSもで制御出来るし、サイズも色も自由自在です。

cこれも文字です

使い道は結構あります。し、導入も思いの外ラック楽でした。

思いの外ハードルは低い

それもこれもリソースを提供してくれる人のおかげです。

• フォントをありがたくダウンロードさせてもらって
• CSSに数行足して
• 使いたい文字にクラス指定

背景画像でCSSスプライトとかよりも遙かに簡単で効果的です。
画像よりも読み込みも早い（と思う）し。

なんか今までめんどくさそうって、導入しなかったのがあほらしいです。

そもそもアイコンを作るっていう心理的負担から解放されて、使いたいところにアイコンが使える。

これがでかい。

下記の記事を参考にさせてもらいました。

意外と知らない？アイコンはWebフォントでつくるとこんなに便利！ | KAYAC DESIGNER'S BLOG – デザインやマークアップの話

シンプル、ミニマルなサイトを作りたい時に役立ちそうなアイコンやフォント、ギャラリーなどのまとめ – かちびと.net

手順と言うと

1. 5フォントをダウンロード
2. 5フォントフォルダを解凍して、自分の管理するサーバーへアップロード
3. 5サイトに書いてあるCSSをコピーして、自分のブログのCSSの任意の位置（どこでも）にペースト
4. %フォントファイルへのパスを（環境によって変わります）修正

これで基本的には終わりです。

c僕はこちらを使わせてもらってます。

Web Icon Fonts | chibatch.jp

CSSをこれだけ書き込むだけです。

@font-face{
font-family: ‘WebIconFonts’;
src: url(‘webiconfonts.eot’);
src: url(‘WebIconFonts.eot?’) format(‘eot’),
url(‘WebIconFonts.woff’) format(‘woff’),
url(‘WebIconFonts.ttf’) format(‘truetype’);
}

.icon {
font-family: WebIconFonts;
}

このようにクラス指定もすでにしてくれているので、さらに簡単です。

使いたいときに

<span class="icon2">D</span>

こんな感じでクラス指定すれば簡単にDアイコンが出現します。

ソーシャル・ネットワークアイコンとか使い道が豊富そうですね。

t @shintarowfresh

とか、簡単きわまりないです。

RRSSに登録お願いします。

とか、リンク[tag@mail

今までアイコン作るのがめんどい部分もだいぶ作業がはしょれます。
なにより、グラフィカルな方がリッチ感が出るというモノです。

フレッシュの目線それは左眼だけ二重な

やろうと思えば5分で行けます。

なによりこのポスト、記事に画像を使ってないんですよ。

とりあえず導入してみても全然損しないレベルです。

@shintarowfreshでした。

文：シンタロヲフレッシュ

はてブ

pocket

twitter