
Google Chromeで簡単にサイトの速度調査!プラグインで表示速度も短縮してみた
目次
ども、ども! フロントエンドエンジニアのおはぎです。
サイト制作でアイコンをどのように使用していますか?
png形式で画像を作成?それともsvgで出力する?!
デザインによって様々な選択が出来るようになった今、 画像に書き出さず、アイコンをWebフォント化して使う方法を伝授します٩(๑>∀<๑)۶.1.2.3…Go!!
アイコンをWebフォント化しておけば、文字と同様にスタイルシート内で見た目の変更が可能となるので、変更する場面でとても便利です。
※プロパティ:「color」や「font-size」のスタイルシートで簡単に対応。
アイコンを利用する際によく用いられるのは、文字の横にデザインする場合!
リスト形式の表示方法で文字の隣りに配置することが多く、コーディングする際にポジションの設定をして、フォントとの上下中央を合わせないといけません。
そこで事前にフォント化をしておけば、文字のように扱えるのでとても簡単に変更できます。
まずは、オリジナルアイコンの用意。
作成するソフトは、SVGファイルで保存(書き出し)が可能であれば大丈夫です。
今回はAdobe Illustratorで作成してみました。
メールのアイコンとしてよく使われる手紙のイラストを作成しました。 完成したら、svg形式で保存します。
「IcoMoon」は、WEBフォント化ができるサイトです。
様々なプランの記載がありますが、登録なしで無料のままWEBフォントの作成もできます。
それでは、サイトへアクセスしてからの手順をご紹介。
https://icomoon.io/
右上の[IcoMoon App]ボタンをクリック。
今度は左上の[Import Icons]ボタンから、先ほど作成したSVGファイルを選択して読み込みます。
SVGファイルの読み込みができたら、以下のように表示されているかと思います。
フォントファイルに含めたいアイコンをクリック。
黄色い枠線が付いていれば選択されている状態です。
アイコンが選択されている状態で、サイト右下の[Generate Font]をクリック。
サイト右下にある「歯車マーク」をクリックすれば、フォント名やclass名の設定ができます。
Font Name・・・フォント名
Class Prefix・・・クラス名(CSSで指定する際のクラス名)
設定ができたら、[Download]ボタンをクリック。
ダウンロードが完了したら、zipファイルを解凍します。
Webフォントとして表示されるには、解凍ファイル内に
があれば大丈夫です。
解凍データの中に[demo.html]があるので確認してみよう!!
style.cssの内容は以下になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="table_wrap"> @font-face { font-family: 'maill'; src: url('fonts/maill.ttf?ko9orb') format('truetype'), url('fonts/maill.woff?ko9orb') format('woff'), url('fonts/maill.svg?ko9orb#maill') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'maill' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-02:before { content: "\e900"; color: #4b4b4b; } |
色見の部分やフォントサイズを変更するだけで、アイコンの変更ができるようになりました!
自作したアイコンをWebフォント化しておくだけで、いろんなサイトでも使い回せたり、色見の変更をする場合もとても楽になります。
わざわざIllustratorやPhotoshopなどの画像編集ソフトを使わなくても変更対応ができるので、とても効率的です!!
そもそも、自作アイコン作れないんだけどなぁー。。。
という方は、有名どころですが、Font Awesomeのサイトがオススメ!
Webフォント化、良ければご活用してみてください!!