アイコンフォント 自由自在
- カテゴリー
- HTML/CSS >
- HTML/CSSの実践
全3回
このシリーズでは、自分に必要なWeb Fontsファイルを生成する方法を解説します。画像で作られることが多いアイコンなども、Web Fontsを利用することで、さまざまなメリットがあります。(2016年2月にシリーズタイトルを「Web Fonts 自由自在」から「アイコンフォント 自由自在」に改題しました)
最終回 アイコンの配置テクニック
アイコンフォントCSSの生成をSassのmixinを作ってより効率的に行う方法を解説します。前回、解説したgulpでの自動化と組み合わせれば、作業の効率化と、質の向上につなげることができます。
第2回 gulpで生成を自動化
アイコン画像素材から、それらをまとめたフォントファイル生成、フォントを配したCSSファイルの書き出しまでをgulpを使って自動化します。より効率的にアイコンフォントファイルを管理します。
第1回 Webアプリの利用
Web Fontsファイルにはアイコンなどのベクターデータを登録できます。Web FontsにするとCSSでの装飾などが簡単に行えます。記事では簡単なWebアプリを利用したファイル生成方法を紹介します。