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 아이콘을 생성할 수 있었습니다!

마지막으로

뭔가 실수 등 있으면 부담없이 코멘트하실 수 있으면 기쁩니다.