弊社のアイコンをwebフォントで使いたい。

12163 ワード
CSS font SVG CSS テキストリンク

やろうと思ったきっかけ

photoshopでの

のようなアイコンを毎回切り取ったりして使うのは面倒くさい。
（ものによっては別の色のバージョンも必要。）

だからといってfont-awesomeで似たような画像を探すのも面倒。
（一部freeでは使うことができない。）

アイコンを切り取るまで

Photoshop

対象のレイヤーを右クリックして書き出し書式をクリック。

そこを押すと以下のような画面になる。

すべてを書き出しで.svgを作成する。

一応

  • 別レイヤーに写して書き出す
  • 画像アセットを使って書き出す
  • svgをコピーでコードを書き出す

など他にもいろいろな方法がありますが、今回は省略。

XD

対象の図形をクリック。（今回はグループ化 33）

macならファイル → 書き出し → 選択済みをクリック。
（ショートカットキーはcmd + E）

フォートマットからsvgを選択

書き出しを押すとsvgファイル書き出される。

参考 : https://helpx.adobe.com/jp/xd/help/export-design-assets.html

書き出したアイコンをwebフォントとして登録する。

IcoMoonにアクセス。

右上にあるIcoMoon Appをクリック。

Import Iconを選択して
今回作ったsvg画像を選択する。

取り込むと以下のような状態になると思います。
（今回は別枠のウィンドウとバツのアイコンを読み込みます。）

二つのアイコンを選択してGenerate Fontをクリックすると

[Generate Font] 横の歯車アイコンをクリックでフォント名やclass名の設定を行うこともできる。

設定が終わったらDownloadをクリックするとダウンロードされる。

ダウンロードしたwebフォントをwebサイトに入れる。

任意のディレクトリを作成し、index.htmlを作成

  • index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<body>
</body>
</html>

先ほどダウンロードしたフォルダを開き、fontsとstyle.cssを先ほどのディレクトリに格納する。

ディレクトリについてはこのような感じになっています。

style.cssについて

  • style.css
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?n0uysn');
  src:  url('fonts/icomoon.eot?n0uysn#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?n0uysn') format('truetype'),
    url('fonts/icomoon.woff?n0uysn') format('woff'),
    url('fonts/icomoon.svg?n0uysn#icomoon') 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: 'icomoon' !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-arw:before {
  content: "\e900";
  color: #fff;
}
.icon-batu:before {
  content: "\e901";
  color: #fff;
}

今回は、
.icon-arw(別ウィンドウのアイコン)
.icon-batu(バツのアイコン)
を使用。

htmlへの書き込み方

  • index.html
<div>
  <i class="icon-arw"></i><span>アイコン単体で使う</span>
  <p class="icon-arw">pタグの中に入れる。</p>
</div>

のように記載を行なって、

の状態になっていたら完成です！

実際に行なってみて

webフォントなので、色やサイズの変更が容易に行うことができるようになった。

.icon-arw:before {
  content: "\e901";
  color: #fff;
}

↑のcolorを変更か上書きさせれば色の変更を行うことができる。
また、アニメーションの色の変化についてもcssでの色変更なので、滑らかになる。

サイズの変更についてはfont-size: 20px;などで変更を行うことができる。

自作アイコンを追加したい場合には、またIcoMoonの設定が必要？

fonts/icomoon.svgの部分で

・・・
<glyph unicode="&#xe900;" glyph-name="arw" d="M0 960v-64h384v64h-384zM640 960v-64h384v64h-384zM960 960h64v-384h-64v384zM0 0v-64h1024v64h-1024zM0 960h64v-1024h-64v1024zM960 320h64v-384h-64v384zM489.6 470.4l44.8-44.8 448 448-44.8 44.8z" />
<glyph unicode="&#xe901;" glyph-name="batu" d="M1023.973 881.241l-945.219-945.219-78.768 78.768 945.219 945.219 78.768-78.768zM78.753 960.009l945.219-945.219-78.768-78.768-945.219 945.219 78.768 78.768z" />
・・・

↑のような設定を行なっているので、自作アイコンを使う場合には再度IcoMoonの設定が必要かもしれない。

→ サービス系のものだとデザインのリニューアル(もしくは新規機能などの場合)がないとアイコンを追加することがないと思う。
→ 静的なwebサイトだとすでに全体のデザインが決まっている場合が多いと思う(全部は決まっていなくてもアイコンなどの変更とかは少ないかも)。
→ また、変更する場合にも一から全部読み直すというよりは追加するアイコンを追加するだけでよさそうなので、そんなに工数も使わないで対応を行うことができそう。

最後に

もう少しwebフォントを管理する機能とか(storybookなど)を導入して、どんなアイコンがあるのかを見やすくできればもっと気軽に自作のwebフォントを使えそう。。
他のサービスとかでもwebフォントにできるやつがあったので、それだともっといい感じになるかも・・・！