IconVaultでfeedlyのWEBアイコンフォントを作ってみる

PR ブログのための画像使用・編集 0

Iconvau.lt

Iconvau.ltは現在サービスが終了しています。

前回、IcoMoonというWEBサービスを利用してfeedlyのWEBアイコンフォントを作成しました。

今回は、IcoMoonよりも、手軽にアイコンフォントを作成できるIconvau.ltというWEBサービスを使って作ってみたいと思います。

スポンサーリンク
レクタングル（大）広告

SVGファイルの準備

Iconvau.ltを利用するには、SVG形式の画像ファイルが必要です。

僕は、前回作成した以下のSVGファイルを利用したいと思います。

自前で手軽にSVGファイルを作成する方法は、以前書きましたので作成方法はこちらを参照してください。

自作のWEBアイコンフォントの作り方

IconVaultにアップロードしてアイコンフォントを作成

Iconvau.ltでアイコンフォントを作成するには、用意したSVGファイルをzipファイルに、まとめて圧縮する必要があります。

手持ちの圧縮ソフトで、zipファイルにひとまとめにします。僕はこんな感じでSVGファイルをまとめました。

feedly zipファイル

feedly.zip

SVGファイルをまとめたzipを用意したら、Iconvau.ltに行き、「CREATE FONT」をクリックします。

Iconvau.ltcreate

次に、以下のような画面になるので「Drop files here to upload」と書かれているエリアに、先程のZIPファイルをドロップします。

ZIPファイルをドロップ

すると自動的に、「iconvault.zip」というファイルが生成されてダウンロードできるようになります。

iconvault zip

これだけの手順で、WEBアイコンフォントが作成されます。滅茶苦茶簡単ですね。

アイコンフォントの使い方

作成されたZIPファイルを解凍してみると中身はこのようになっています。

iconvault.zipの中身

CSSファイル「iconvault-preview.css」の中身はこんな感じです。

/*
 * Created with iconvau.lt
 */

@font-face {
  font-family: "iconvault";
  src: url("iconvault_b23ea6791ca537db189f11699a431187.eot");
  src: url("iconvault_b23ea6791ca537db189f11699a431187.eot?#iefix") format("embedded-opentype"),
       url("iconvault_b23ea6791ca537db189f11699a431187.woff") format("woff"),
       url("iconvault_b23ea6791ca537db189f11699a431187.ttf") format("truetype"),
       url("iconvault_b23ea6791ca537db189f11699a431187.svg#iconvault") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon-feedly-square-240:before,
.icon-feedly-240:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.icon-feedly-square-240:before { content: "\f100"; }
.icon-feedly-240:before { content: "\f101"; }

ファイル名から、クラス名が付けられるようです。

.icon-feedly-square-240:before { content: "\f100"; }
.icon-feedly-240:before { content: "\f101"; }

好みのクラス名をつけたいときは、ファイル名に注意する必要があるようです。

使い方は、「iconvault-preview.html」に載っています。

<!DOCTYPE html>
<html>
  <head>
    <title>iconvault glyphs preview</title>
    <link rel="stylesheet" href="iconvault-preview.css" />
    <!--[if lte IE 7]><link rel="stylesheet" href="iconvault-preview-ie7.css" /><![endif]-->

<style>
      * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        background: #292929;
        color: rgb(255, 165, 0);
        font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      a,
      a:visited {
        color: rgb(149, 165, 166);
        text-decoration: underline;
      }
      a:hover,
      a:focus { color: rgb(211, 84, 0); }

      h1 {

        color: rgb(255, 165, 0);
        font-size: 36px;
        font-weight: 300;
        padding: 20px 0;
      }

      .container {
        margin: 0 auto;
        min-width: 880px;
        padding: 0 40px;
        width: 80%;
      }

      .glyph {
        border-top: 2px solid rgba(0, 0, 0, 0.8);
        border-bottom: 2px solid rgba(204, 204, 204, 0.12);
        padding: 10px 0 20px;

      }

      .preview-glyphs { vertical-align: bottom; }

      .preview-scale {
        color: rgb(255, 165, 0);
        font-size: 12px;
        margin-top: 5px;
      }

      .step {
        display: inline-block;
        line-height: 1;
        width: 10%;
      }


      .size-12 { font-size: 12px; }

      .size-14 { font-size: 14px; }

      .size-16 { font-size: 16px; }

      .size-18 { font-size: 18px; }

      .size-21 { font-size: 21px; }

      .size-24 { font-size: 24px; }

      .size-36 { font-size: 36px; }

      .size-48 { font-size: 48px; }

      .size-60 { font-size: 60px; }

      .size-72 { font-size: 72px; }


      .usage { margin-top: 20px; }

      .usage input {
        font-family: monospace;
        font-size:1em;
        margin-right: 3px;
        padding: 2px 5px;
        text-align: center;
        border: 0;
        outline: 0;
        height:44px;

        color: rgb(255, 165, 0);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background: rgba(27,27,27,0.4);
        border-color: #0C0C0C #252525 #2e2e2e;
        -webkit-box-shadow: 0 2px 0 rgba(204, 204, 204, 0.12), inset 0 2px 4px rgba(0,0,0,0.4);
        -moz-box-shadow: 0 2px 0 rgba(204, 204, 204, 0.12), inset 0 2px 4px rgba(0,0,0,0.4);
        box-shadow: 0 2px 0 rgba(204, 204, 204, 0.12), inset 0 2px 4px rgba(0,0,0,0.4);    }

      .usage .point { width: 150px; }

      .usage .class { width: 250px; }

      .footer {
        color: #rgb(255, 165, 0);
        font-size: 12px;
        padding: 20px 0;
      }
    </style>

    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>

  <body>
    <div class="container">
      <h1>Your iconvault contains 2 glyphs:</h1>

      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-feedly-square-240 size-12"></i><i class="step icon-feedly-square-240 size-14"></i><i class="step icon-feedly-square-240 size-16"></i><i class="step icon-feedly-square-240 size-18"></i><i class="step icon-feedly-square-240 size-21"></i><i class="step icon-feedly-square-240 size-24"></i><i class="step icon-feedly-square-240 size-36"></i><i class="step icon-feedly-square-240 size-48"></i><i class="step icon-feedly-square-240 size-60"></i><i class="step icon-feedly-square-240 size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          Class -
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-feedly-square-240" />
          Html code -
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
          Unicode -
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="\f100" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-feedly-240 size-12"></i><i class="step icon-feedly-240 size-14"></i><i class="step icon-feedly-240 size-16"></i><i class="step icon-feedly-240 size-18"></i><i class="step icon-feedly-240 size-21"></i><i class="step icon-feedly-240 size-24"></i><i class="step icon-feedly-240 size-36"></i><i class="step icon-feedly-240 size-48"></i><i class="step icon-feedly-240 size-60"></i><i class="step icon-feedly-240 size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          Class -
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-feedly-240" />
          Html code -
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
          Unicode -
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="\f101" />
        </div>
      </div>
      

      <div class="footer">
        Created by <a href="http://iconvau.lt">Iconvault</a>
      </div>
    </div>
  </body>
</html>

まずヘッダ部分でCSSファイル呼び出します。

<link rel="stylesheet" href="iconvault-preview.css" />

あとは、アイコンをフォントを呼び出したいところで以下のように呼び出します。

<i class="step icon-feedly-square-240 size-12"></i>
<i class="step icon-feedly-square-240 size-14"></i>
<i class="step icon-feedly-square-240 size-16"></i>
<i class="step icon-feedly-square-240 size-18"></i>
<i class="step icon-feedly-square-240 size-21"></i>
<i class="step icon-feedly-square-240 size-24"></i>
<i class="step icon-feedly-square-240 size-36"></i>
<i class="step icon-feedly-square-240 size-48"></i>
<i class="step icon-feedly-square-240 size-60"></i>
<i class="step icon-feedly-square-240 size-72"></i>

サイズ指定用のオプションクラスなどの作成方法も、「iconvault-preview.html」に載っていて参考になります。

表示されるアイコンフォント

「iconvault-preview.html」をブラウザで開くと、作成されたアイコンフォントを見ることができます。

iconvaultで作成したWEBアイコンフォント

このような感じで、色や大きさを自由に変更して使うことができます。

ダウンロード

今回作成したfeedlyのWEBアイコンフォントは以下でダウンロードできます。

[wpdm_file id=2]

まとめ

前回はIcoMoon、今回はIconvau.ltと、手軽に使えるアイコンフォント作成サービスを使用してみました。

どちらも手軽に作成できるのには変わりありませんが、手軽さで言えばIconvau.ltに少し分があるようです。

ただし、機能面と手軽さを考えるなら、IcoMoonがベストだと、両方使ってみて思いました。

それぞれのサービスは、こんな時に便利です。

Iconvau.lt

  • 手っ取り早く自作のアイコンフォントだけ作りたい
  • 大量にアイコンフォントを作ったので、いちいち操作したくない
  • 呼び出すクラス名は、ファイル名で十分

IcoMoon

  • アイコンフォントをアップロード後も少し修正して手直ししたい
  • 呼び出すクラス名をファイル名から修正したい
  • その他の有名アイコンフォントも取り込んでセットにしたい