WEBLIC LLC

ブログ

オリジナアイコンを簡単にWEBフォントにする方法

Web制作

2016年10月19日

ここ数年スマホからのアクセスの割合がPCを超えているサイトが多くなっています。
そこで、スマホサイトを作る上で、なるべくサイトの容量を軽くするために最近ではWEBフォントを使ってアイコンなどを表示するパターンが増えています。

Bootstrapなど最初からWEBフォントを備えたフレームワークはありますが、
デフォルトで沢山のフォントを備えています。
必ずしもすべてのアイコンを使うわけではないし。。。
それに、オリジナルアコンが使いたいって時に、簡単にWEBフォントにする方法をご紹介します。

今回はこちらのWEBサービスを使って紹介します。
IcoMoon
https://icomoon.io/

元となるアイコンデザイン制作

001
まずは、イラストレータにて、元となるアイコンのデザインをします。
この時にアイコンを小さく使う場面も出てくるので、なるべく簡素なデザインにします。

002
デザインが出来たらSVG1.1で保存します。

IcoMoonを使ってWEBフォントファイル作成

003
次にブラウザでIcoMoonにアクセス
https://icomoon.io/

004
Import Iconsから先程作ったsvgファイルをアップします。

005
Generate Fontをクリック

006
Downloadをクリック

実際にHTMLを書いてみる

007
ダウンロードしたファイルをみるとこうなっています。
使用するのはfontsフォルダの中身とstyle.cssになります。

008
ちなみにstyle.cssの中身はこんな感じ

009
htmlはこんな感じで書きます。

010
フォントカラーに赤を指定したのでちゃんとアイコンが赤くなっています。

関連記事

Web制作

Sass mixinの引数に0を指定する方法

背景画像をカラムごとに違う画像を配置するため、mixinを使って設定しましたが、うまくいきませんでし...

2016年12月12日

Web制作

メイリオフォントはCSSでイタリックが効かない!

先日ある案件でデバイスフォントを斜体にする必要がありました。普段は何も気にせずCSSでイタリックを設...

2017年4月3日

Web制作

子要素にaタグを含む親要素にhover処理をする

現状のCSSではaタグを持つ親要素のdivにスタイルを定義することができません。今回は同じ要素のボッ...

2016年12月14日

Web制作

アイコンを軽量化して、Webサイトの表示速度を速くする

Googleの調査によれば、ページの読み込み時間が1秒から3秒に増加すると、離脱率が32%増加すると...

2023年9月7日

Web制作

VirtualBoxでGuest Addsinionsをインストールしても画面サイズが変わらない場合の対処法

弊社の制作環境はMacで、制作したサイトのIEチェックはVMwareもしくはVirtualBoxにイ...

2017年3月8日

  • カテゴリー

  • RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社