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

Last updated at 2019-12-08Posted at 2019-12-08

概要

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ソース

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up