エイプリルフールネタを仕込む時間もなかった隊長です。
いい加減ここのテーマもなんとかしないといけないんですが、まあそれはおいといて。

今日はconcrete5コミュニティでロゴをアイコンフォントに出来ないか?というやりとりがありました。面白そうなので私もちょっとやってみました。

1.ロゴデータをダウンロード

http://www.concrete5.org/help/legal/logo_usage/

まずはSVGデータでダウンロードします。

 

2.イラレでアイコン作ってSVGを書き出しなおします。

スクリーンショット 2014-04-01 10.06.30

アイコンにしたいのは右下のなので、レイヤーを整理します。

スクリーンショット 2014-04-01 10.15.13

フォントにするときは、パスファインダーを使って結合パスにしておくといいですよ。

結合パスってなんやねん?って人もいますよね?
はい、まず手の白い部分を前にしてて「前面オブジェクトで型抜き」ってのをすればいいんですよ。
すると下記のような結合パスになりますからね。
パスファインダーが見つからない人はウィンドウメニューから探してくだしあ。

スクリーンショット 2014-04-01 17.00.56

 

別名保存で、SVGに書き出します。

スクリーンショット 2014-04-01 10.27

書き出しのオプションは特に変更してないです。

スクリーンショット 2014-04-01 10.28.05

3.アイコンフォントを作るサービスを利用します。

スクリーンショット 2014-04-01 17.09.45

http://icomoon.io/app/

アクセスしたら上部の「Import Icons」ボタンをクリックして先ほど書き出したSVGファイルをアップします。

002

アップしたアイコンを選んで・・・004

画面したのFontボタンをクリックします。

003

この画面になったら、下のほうのDownloadボタンをクリックします。

 

 

4.出来上がったアイコンフォントを使う

005

ダウンロードしたファイルを参考に使いましょう。

006

けどさ、このCSSだとグラデーションできないじゃない??

なので、16行目みたいにHTMLでアイコンを描いて、

007

こんな感じでCSSを別に追加してあげてみました。
CSS3のテキストグラデーションはいろんな方法がありますが、短いこちらのページのを参考にしてみました。

009

 

えーっと実際にサーバー上にあげたので、デモページをみてね。

008