6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-08

概要

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

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

アイコンフォンとは?

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

ferretからの引用

制作物

image.png

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

フォルダ構成

iconfont.png

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

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?