[B! Webフォント] syake07のブックマーク

無料でできる！オリジナルアイコンフォントを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

みなさんはじめまして！アートディレクター兼デザイナーの長岡と申します。社内では、ひろさんと呼ばれています。入社したばかりですが、どうやらLIGの最年長記録を更新したようです(^^;) 2児の父親として、プライベートでは、子育てに奮闘中なのですが、最近乗り物に興味を持ちだした息子。電車や車が大好きなようで、テレビに映る度に指をさして「でぇ～んしゃ～♪」とか「ぶぅ～ぶぅ～♪」と叫んでます。そんな息子の姿を見て、毎日癒されてます(^-^) さて本題に入りますが、スマホサイト・レスポンシブデザイン・Bootstrapなどで度々目にするアイコンフォント。モバイルファーストを考えながらの制作ですと、表示速度も意識しなければなりませんね～。フリーのアイコンフォントは、たくさんあれど、「アイコンが多すぎる！」「もっと少なくしたい！」「オリジナルでアイコンを作ったけれども、これをどうにかアイコ

syake07 2015/03/20

リンク

もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法

こんにちは、鴨田です。最近、アイコンがセットされたWebフォントを使うことで、画像を使わずにアイコンを表示するという手法が流行っていますね。すごく興味はあったのですが、なかなか使う機会もなく、便利そうだなと思っていただけで、今まで使ったことがありませんでした。しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。ここでは、「Entypo」フォントから5つ選択します。選択が終わったら、上部のタブから「Edit codes」をクリックします。アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。英語で頭