Google Material Icons や Font awesome などは、どのようにしてiタグ内のテキストをアイコンとして表示しているのか? と思ったことありませんか?
ex) こういうヤーツ
<i class="material-icons">fingerprint</i>
<i class="fab fa-accessible-icon"></i>//cssのcontentでテキストが設定されている。
これはligature (合字/リガチャ)という、複数文字を一つの文字として表示する手法を利用したものです。
この記事では、独自のligatureアイコンを作成 する手順を記します。
サンプルプロジェクト
[github] itoz/ligature-icons
上記プロジェクトを元に記します。
事前準備
grunt-webfont を利用します。
-
fontforgeなど、環境により事前インストールが必要なものがあるので grunt-webfont のページを参照
-
gulpやwebpackを利用したいところですが、2018.5.1現在、ligatureを作成するには、このmoduleが一番よい?ようです。
{
"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を設置してください。
ビルドする
//
// @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>
最後に
なにか間違いなどありましたら気軽にコメントいただけるとうれしいです。