2015-07-09
アイコンフォントを作ってみました。
今更感のあるネタですが…アイコンフォント
WEBサイトを制作していく上でアイコンフォントを活用することが増えてきたと感じています。
Genericons（http://genericons.com/）とか便利ですよね。
オリジナルでアイコン作成よりも、どこかで見たことのあるアイコンが閲覧者にはわかりやすい場合もあります。ですが、サイトのロゴや自社サービスの場合は、やはりオリジナルアイコンが必要になります。
ということでオリジナルアイコンのアイコンフォントをIcoMoonを使用して作ってみましたので備忘録的にまとめてみました。
アイコンフォントの作り方
１．アイコンフォント用にSVGファイルを作成
なんとなく正方形のアートボード(200px×200px)を用意して、
デザイナーが作成してくれていたAIデータからロゴを貼り付けて大きさを調整。
SVG形式で保存。
２．IcoMoon App(https://icomoon.io/app/#/select)にアクセスします。
３．「ImportIcons」を押して、先ほど作成したSVGをアップロード。アイコンが追加されます。
４．追加したいアイコンを選択して、右下の「GenerateFont」をクリックします。
５．右下の「Download」をクリックしてダウンロードします。
６．ダウンロードしたファイルを解凍し、Fontsディレクトリとその中のファイルをサイトにアップロードします。
７．Style.cssのコードをサイトCSSに追記or読みこませます。
|
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 |
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?3mrkf'); src:url('fonts/icomoon.eot?#iefix3mrkf') format('embedded-opentype'), url('fonts/icomoon.ttf?3mrkf') format('truetype'), url('fonts/icomoon.woff?3mrkf') format('woff'), url('fonts/icomoon.svg?3mrkf#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; 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-sierra:before { /* ←これが追加したロゴアイコンのクラス */ content: "\e600"; } |
これでHTMLにこんな風に書けばロゴアイコンが表示されます。
|
1 |
<span class="icon-sierra" ></span> <!--sierraの部分が登録したアイコンの名前になります --> |
アイコンフォントの使い方
１．拡大縮小してもジャギらない
フォントなので当然ですが、拡大してもジャギらないのでレスポンシブサイトを作成するときに良さそうです。
|
1 2 3 4 5 6 |
<div> <span class="icon-sierra" style="font-size:60px;"></span> <span class="icon-sierra" style="font-size:120px;"></span> <span class="icon-sierra" style="font-size:200px;"></span> <span class="icon-sierra" style="font-size:300px;"></span> </div> |
２．色を変えられる
これもフォントなので当然ですが、色を変えられれます。色違いのアイコンをコツコツと作らなくても良いのです。
|
1 2 3 4 5 6 7 |
<div> <span class="icon-sierra" style="font-size:120px; color:yellow;"></span> <span class="icon-sierra" style="font-size:120px; color:blue;"></span> <span class="icon-sierra" style="font-size:120px; color:red;"></span> <span class="icon-sierra" style="font-size:120px; color:green;"></span> <span class="icon-sierra" style="font-size:120px; color:pink;"></span> </div> |
３．斜体にしたり、太字にしてみたり、ロゴマークの扱いとしてはNGなのですが…
|
1 2 3 4 |
<div> <span class="icon-sierra" style="font-size:120px; color:black; font-style:italic;"></span> <span class="icon-sierra" style="font-size:120px; color:black; font-weight:bold;"></span> </div> |
４．ソーシャルボタンみたいにしてみたり。
|
1 2 3 4 |
<div> <div style="border-radius:60px; background-color:#454545; width:120px; height:120px; text-align:center; float:left; margin-right:1rem;"><span class="icon-sierra" style="font-size:96px; color:#ffffff; line-height:120px;"></span></div> <div style="border-radius:60px; background-color:#0279D2; width:120px; height:120px; text-align:center; float:left;"><span class="icon-ksi" style="font-size:84px; color:#ffffff; line-height:120px;"></span></div> </div> |
色々と活用できそうです。
ちなみに、本サイトでも一部のロゴアイコンをフォントに置き換えてみました。
なぜ一部だけかというと、デザイン優先でピクセル単位での位置調整をしていますので、
画像からの差し替えはリスクが高いということで（笑）。
