font-awesomeって便利なWebアイコン ライブラリですよね。
今までのアイコンと言えば「PNG画像を使ってから、CSSで揃えて ...」 という感じでした。
それがfont-awesomeを導入すると、
htmlの"iタグ"のクラス内に使いたいアイコンのクラスを入れるだけで使えるので
Facebookや、Twitteのシェアボタン作成時に使っている人も多いと思います。
1つ残念なことと言えば
font-awesomeには" LINE ", " はてなブックマーク ", " feedly "のアイコンが揃っていません。
( 海外のライブラリなので仕方ないですが .. )
それらのアイコンが揃っていない為、カスタムシェアボタンを作るのを諦めて
公式のシェアボタンを使っているケースも少なくないのでしょうか。
ってことで、Webフォントとして使えて、
克つfont-awesomeと互換性があるLINEやfeedly等のアイコンを作っていきます！
完成すれば下記の画像の様にcssのクラスを割り当てるだけで使用出来るようになります。
( *このサイトのソーシャルシェアボタンで実際に使用しています。 "はてなブックマーク", " feedly ", モバイルでアクセスすれば "LINE" ボタン )
今回のアイコン作成に当たっての手順はたった2ステップです。
時間も手間も掛かりません。
1. アイコンの元となるSVGファイルの入手
2. Fontello (Webサイト)を使ってフォントアイコンのジェネレート
今回のアイコンの元となる画像は"Simple Icons"というWebサイトから入手しました。
( Free Art License というライセンスが取られていて、コピーレフトで公開されています。 )
Simple IconsはSVG形式ブランドアイコンの画像が公開されているサイトで、
サイトから入手する他、GitHubでもSVGファイルが公開されています。
LINEのアイコン以外にも、はてなブックマーク、feedly, Microsoft excel, word ... etc
その他さまざまな企業やライブラリのロゴも公開されています。
アイコンの作成にはFontelloというWebサービスを使います。
FontelloはアイコンをジェネレートできるWebサービスで
font-awesome、Iconic等のアイコンライブラリから必要なアイコンをピックアップして
「小さいアイコン ライブラリを作ろう！」というサービスです。
既存のアイコン以外にも、SVGをインポートしてカスタム アイコンを生成することもできます。
カスタム アイコンを作成するには
下記の様にSVGファイルをドラッグするだけでインポートされます。
( SVGファイルのファイル名がcssで使う時のクラス名になります )
下記のボタンを押すと、CSSで使う時のクラスのプリフィックス(接頭辞)が定義出来ます。
デフォルトでは "icon-*"ですが、font-aweseomeと互換性を保つため &
本家で目的のアイコンが追加された時に簡単に書き換えれるように
” c-fa-* ”から始まるクラス名にしました。
"Customize Name" ボタンから
作成するWebフォントのCSSクラスを個別に設定することも可能です。
" Download webfont " ボタンを押す作成したフォントアイコン群が
zipファイルで形式でダウンロードされ、解凍すると利用出来ます。
# zipを解凍したファイル群
- fontello-ea*
config.json
- css
animation.css
fotello-codes.css
fotello-embedded.css
fotello-ie7-codes.css
fotello.css
demo.html
- font
README.txt
Webで利用する場合は
"css/fontello.css"を読み込みんで下記のようなHTMLコードにすれば利用出来ます。
<!-- cssの読み込み -->
<link rel="stylesheet" type="text/css" href="/YOUR-fontello-icon/css/fontello.css">
以上でカスタムアイコンの完成です。
githubで作成したアイコンも公開しておいたので、
そちらを利用するればカスタムアイコンを作成せずに利用できます。
( LINE, mixi, はてなブックマーク, feedlyを始め、30アイテム位入れておきました )
Webフォントのカスタム アイコンを作るのは、そこまで面倒ではないので
ゼヒ×２参考にしてください！
GitHub: several-icons
