「Font Awesome」が4.1.0にバージョンアップ! 71種のアイコンが追加されたぞ

スポンサーリンク

当ブログでも活用しているWebアイコンフォント「Font Awesome」が4.0.3から4.1.0にアップデートされていました。
このアップデートで71種類のアイコンデータが追加されています。

各種ファイルアイコンのアイコンフォントや、VineなどのWebサービスのロゴフォントなど、なかなかいい感じのラインナップですよ。

Font Awesome

「Font Awesome」はブログやWebサイトのデザインに欠かせない様々なアイコンを、画像ではなくWebフォントでテキストとして扱えるようにするものです。

通常Webフォントを使う場合、フォントファイルをサーバーにアップロードしないといけませんが、「Font Awesome」はlinkタグでCSSを読み込むだけで、CDNサーバーからデータを引っ張ってきてくれます。

実際にWebサイト上に表示するには、以下の書式で記述するだけです。

<i class="fa fa-bomb"></i>

新たに加わった71種のアイコンフォント

Font Awesome 4.1.0 New Icons

うーん、ちょっとこれじゃ小さくて何がなんだかわかりづらいですね。

今回のアップデートで追加されたアイコンフォントは71種類とかなり多め。その中でも使いドコロがいろいろありそうなのが、ファイルタイプを示すアイコン群でしょうか。

Font Awesome File Type Icons

アーカイブやオーディオ、Excel、Word、画像、動画、PDFなどを示すアイコンが新たに追加されたので、記事中からファイルをダウンロードさせるときなど、ボタンの装飾に使ったりするとわかりやすくなりそうですね。

それ以外にも、割りと最近よく目にするWebサービスのロゴアイコンも多数追加されています。いくつか実際にWebフォントで紹介すると、

「Vine」のロゴアイコン。
「Codepen」のロゴアイコン。
「Digg」のロゴアイコン。
「reddit」のロゴアイコン。
「SoundCloud」のロゴアイコン。
「WordPress」のロゴアイコン。

などなど。さまざまなWebサービスのロゴがWebフォントで表示することができますよ。

「Font Awesome」はソーシャルメディアのアイコンも多数用意されているので、TwitterやFacebook、Google+などへのリンクや、オリジナルのシェアボタンなどに利用することで表示高速化にも効果が見込めます。


当ブログではロゴを始めとして、ほぼ全てのアイコンをWebフォントで表示しています。詳しくは以下。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく