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制作

Webブラウザで現在地が取得できない原因

弊社で管理しているサイトでGoogle MapsのAPIを使って、現在地を取得するサービスがあります...

2016年11月8日

Web制作

さくらのレンタルサーバでWordPressのサイトをSSL化でつまずいたところ

今回新規でさくらのレンタルサーバ(スタンダード)+ラピッドの独自SSL(SNI SSL)を使ってWo...

2017年2月13日

Web制作

Google Chrome Ver56でSSL証明書情報を確認する方法

最近何かと話題のSSL(https)ですが、Google Chromeをアップデートしたところ、SS...

2017年2月3日

Web制作

Dreamweaver CC 2017で自動作成されるcssファイルを作らない方法

エディタをDreamweaver CC 2017に乗り換えて少し気になったことがあります。それはSa...

2017年3月23日

Web制作

障害者差別解消法の改正法案にみるウェブアクセシビリティ

2024年4月からは、民間のウェブサイトに関しても、障害のある人を含むすべての人が情報にアクセスしや...

2024年2月26日

  • カテゴリー

  • 本日、 1人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社