概要

Fontello や Font Awesomeなど様々なアイコンを提供しているサイトは多く存在するが、サイトデザインの時に用途にあったアイコンが見つからない場合がよくあります。

その場合、イラレなどで作成したデータからアイコンフォントを作成する方法を紹介します。

アイコンフォンとは？

アイコンフォントとは、簡単にいうと「アイコンを表現出来るWebフォント」です。
Webフォントとは、クラウド上にあげられたフォントデータを読み込むことでホームページに反映させる仕組みを指します。
CSS3からWebフォント機能が追加され、Webデザインの世界でも利用が進んできました。
アイコンフォントはWebフォント同様、CSS3を利用すれば比較的簡単に導入できます。

ferretからの引用

制作物

アイコンの一覧が見られる html
フォントデータ (.eot,.svg,.ttf,.woff,.woff2)
アイコンフォント用CSS

フォルダ構成

package.json

{
  "name": "Iconfont",
  "version": "1.0.0",
  "description": "Generate Iconfont.",
  "scripts": {
    "gulp": "gulp"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-consolidate": "^0.2.0",
    "gulp-iconfont": "^10.0.3",
    "gulp-rename": "^2.0.0",
    "lodash": "^4.17.15"
  }
}

解説

gulp ・・・　タスクマネージャー
gulp-iconfont ・・・　フォント変換に使用
gulp-rename　・・・　ファイルのリネーム
gulp-consolidate　・・・　テンプレートエンジンで使用

gulpfile.js

var gulp = require('gulp');

var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');
var rename = require('gulp-rename');

var filename = 'icon';

gulp.task('Iconfont', function(){
    return gulp.src(['icons/*.svg'])
        .pipe(iconfont({
             fontName: filename,
             //prependUnicode: true,
             formats: ['ttf', 'eot', 'woff','woff2' , 'svg' ]
            }))
        .on('glyphs', function(glyphs, options) {

            let consolidateOptions = {
                glyphs: glyphs,
                fontName: filename,
                fontPath: '../fonts/',
                className: 'ico'
            }

            gulp.src('temp/css.ejs')
                .pipe(consolidate('lodash', consolidateOptions))
                .pipe(rename( { basename: filename , extname: '.css'} ) )
                .pipe(gulp.dest('src/css/'));

            gulp.src('temp/html.ejs' )
                .pipe(consolidate( 'lodash', consolidateOptions))
                .pipe( rename( { basename: filename , extname: '.html'}))
                .pipe( gulp.dest( 'src/' ) );
        })
        .pipe(gulp.dest('src/fonts/'));
});

解説

フォント変換完了後、HTMLとCSSを生成しています。

テンプレート

HTML

html.ejs

<html>
  <head>
    <title><%= fontName %></title>
    <link href="css/<%= fontName %>.css" rel="stylesheet">
    <style>
      body { font-family: Gill Sans; text-align: center; background: #f7f7f7 }
      body > h1 { color: #666; margin: 1em 0 }
      .glyph { padding: 0 }
      .glyph > li { display: inline-block; margin: .3em .2em; width: 5em; height: 6.5em; background: #fff; border-radius: .5em; position: relative }
      .glyph > li span:first-child { display: block; margin-top: .1em; font-size: 4em; }
      .glyph-name { font-size: .8em; color: #999; display: block }
      .glyph-codepoint { color: #999; font-family: monospace }
    </style>
  </head>
  <body>
    <h1><%= fontName %></h1>
    <ul class="glyph"><% _.each(glyphs, function(glyph) { %>
      <li>
        <span class="<%= className %> <%= className %>-<%= glyph.name %>"></span>
        <span class="glyph-name"><%= className %>-<%= glyph.name %></span>
        <span class="glyph-codepoint"><%= glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() %></span>
      </li><% }); %>
    </ul>
  </body>
</html>

スタイルシート

css.ejs

@font-face {
    font-family: "<%= fontName %>";
    src: url('<%= fontPath %><%= fontName %>.eot');
    src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
        url('<%= fontPath %><%= fontName %>.woff') format('woff'),
        url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
        url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="<%= className %>-"]:before, [class*=" <%= className %>-"]:before {
    display: inline-block;
    font-family: "<%= fontName %>";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.<%= className %>-lg {
    font-size: 1.3333333333333333em;
    line-height: 0.75em;
    vertical-align: -15%;
}
.<%= className %>-2x { font-size: 2em; }
.<%= className %>-3x { font-size: 3em; }
.<%= className %>-4x { font-size: 4em; }
.<%= className %>-5x { font-size: 5em; }
.<%= className %>-fw {
    width: 1.2857142857142858em;
    text-align: center;
}
<% _.each(glyphs, function(glyph) { %>.<%= className %>-<%= glyph.name %>:before { content: "\<%= glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() %>" }
<% }); %>


/**/
[class^="af-<%= className %>-"]:after, [class*=" af-<%= className %>-"]:after {
    display: inline-block;
    font-family: "<%= fontName %>";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.<%= className %>-lg {
                     font-size: 1.3333333333333333em;
                     line-height: 0.75em;
                     vertical-align: -15%;
                 }
.af-<%= className %>-2x { font-size: 2em; }
.af-<%= className %>-3x { font-size: 3em; }
.af-<%= className %>-4x { font-size: 4em; }
.af-<%= className %>-5x { font-size: 5em; }
.af-<%= className %>-fw {
                     width: 1.2857142857142858em;
                     text-align: center;
                 }
<% _.each(glyphs, function(glyph) { %>.af-<%= className %>-<%= glyph.name %>:after { content: "\<%= glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() %>" }
<% }); %>

変換

npm run gulp Iconfont

ソース

Githubソース

オリジナルアイコンフォントを作成する

概要

アイコンフォンとは？

制作物

フォルダ構成

package.json

解説

gulpfile.js

解説

テンプレート

HTML

html.ejs

スタイルシート

css.ejs

変換

ソース