スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像の代わりに使えるアイコンタイプのWebフォントのまとめ

アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。

web-font-icon-tittle.png

サイトによって提供されているフォント形式が違っている場合もありますが、次のようにして呼び出すのがメジャーです。

CSS
@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

これだと様々な環境に対応できます。

で、実際にフォントを使う場合ですが、アイコンの場合は直接記述せず、「:before」や「:after」を使ってCSS内に記述する場合が多いみたいです。

CSS
.home:before {
  font-family: "MyWebFont";
  content: "C";
}

この場合クラス名が「home」の要素の前に「C」に該当するアイコンが入ります。

HTML
<i class="home"></i>ホーム

こんな感じで、ホームの文字の前にアイコンが表示されます。

なぜこんな回りくどいことをするのか?これは推測ですが、検索エンジン対策ではないかと思います。

検索エンジンからすれば、アイコン型のフォントであることは恐らく分かりませんので、途中に謎のアルファベットが入った文章だと解釈してしまうのではないでしょうか?そんな誤解を防ぐためにCSSでアルファベットを挿入するようにしているのかなと思います。

あくまで私の推測です。。

あと、TTFやOTFしか提供されていない場合もありますが、@FONT-FACE GENERATORを使えばWOFF、EOT、SVGなど様々な形式に変換してくれて、フォントを呼び出すコードも作成してくれます。

FONT-FACE-GENERATOR.png

ということで予備知識を簡単に説明しました。

1. Web Symbols typeface

webfont-icon.png

2. Foundation Icons Fonts - ZURB Playground - ZURB.com

webfont-icon.png

3. Font Awesome, the iconic font designed for use with Twitter Bootstrap

webfont-icon.png

4. A Free Icon Web Font

webfont-icon.png

5. Free Font Web Symbols by Just Be Nice Studio | Font Squirrel

webfont-icon.png

6. Free Font Symbol Signs by Sander Baumann | Font Squirrel

webfont-icon.png

7. Typicons

webfont-icon.png

8. Iconic Icon Set – 171 icons in raster, vector and font formats—Some Random Dude

webfont-icon.png

9. Fontello - easy iconic fonts composer

webfont-icon.png

ということでアイコン形式のフォントをまとめてみました。今後CSS3を使った使用例なんかも考えていきたいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。