Google Material Icons や Font awesome などは、どのようにしてiタグ内のテキストをアイコンとして表示しているのか？ と思ったことありませんか？

ex) こういうヤーツ
<i class="material-icons">fingerprint</i>
<i class="fab fa-accessible-icon"></i>//cssのcontentでテキストが設定されている。

これはligature (合字/リガチャ)という、複数文字を一つの文字として表示する手法を利用したものです。

wikipedia 合字

この記事では、独自のligatureアイコンを作成 する手順を記します。

サンプルプロジェクト

[github] itoz/ligature-icons
上記プロジェクトを元に記します。

事前準備

grunt-webfont を利用します。

fontforgeなど、環境により事前インストールが必要なものがあるので grunt-webfont のページを参照
gulpやwebpackを利用したいところですが、2018.5.1現在、ligatureを作成するには、このmoduleが一番よい？ようです。

package.json

{
  "name": "ligature-icons",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "grunt"
  },
  "author": "itoz",
  "license": "ISC",
  "devDependencies": {
    "grunt-cli": "^1.2.0",
    "grunt-contrib-clean": "^1.1.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-webfont": "^1.6.0"
  },
  "dependencies": {
    "grunt": "^1.0.1"
  }
}

サンプルプロジェクトをpullし、上記fontforgeなどをインストールしたらおもむろに、

$npm i

でmoduleをインストール。

svg アイコンを作成＆設置

(サンプルプロジェクトの/design フォルダにあるsketchなどを利用し、) デザインを作成し、/src/svg フォルダに、svgを設置してください。

ビルドする

Gruntfile.js

//
// @see https://www.npmjs.com/package/grunt-webfont
//
module.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-webfont');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean:["dist"],//distを消去
    webfont: {
      icons: {
        src: 'src/svg/*.svg',
        dest: 'dist/fonts/ligature-icons',
        destScss: 'dist/scss',
        options: {
          ligatures:true,
          engine:'fontforge',
          font: 'ligature-icons',
          stylesheet: 'scss',
          template: 'src/template/template.css',
          templateOptions: {
            baseClass: 'ligature-icons',
            classPrefix: 'ligature-icons-'
          },
          htmlDemoTemplate:"src/template/template.html",
          htmlDemoFilename:"_sample",
          callback: function(filename, types, glyphs, hash) {
              console.log("[created] ligature icons")
          }
        }
      }
    }
  });
  grunt.registerTask('default', ['clean','webfont']);
};

$npm start

これでdistフォルダにligatureアイコンが書き出されます。

dist/fonts/ligature-icons/_sample.htmlを確認して見てください。
下記のようにアイコン一覧が確認できればOK.

任意のプロジェクトに読み込む

dist/fonts/ligature-icons/* を任意のプロジェクトにコピー。
dist/scss/*.scss を任意のプロジェクトにコピーしソース内のパスを1で設置したパスに変更。
2.のscssをpartialとして他のscssから読み込んでビルドされるように設定。

コード記述例

ex) githubアイコンを表示したい場合

<i class="ligature-icons">github</i>

**これで独自のligatureアイコンが生成できました！**

最後に

なにか間違いなどありましたら気軽にコメントいただけるとうれしいです。