12周年記念パーティ開催! 2024/5/10(金) 19:00

アイコンフォント 自由自在

全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アプリを利用したファイル生成方法を紹介します。