超详细的字体图标的制做与使用——icomoon的使用及字体图标的追加

一. icomoon的使用

1. icomoon的网站： icomoon.io/

2. 进入网站后点击右上角icoMoon App

3. 点击左上角的import icons导入本地的svg文件（也能够直接选择该网站现有的svg）

选择本地svg

选择须要的svg

而后就能够点击右下角的Generate font，进入配置网页

4. 下载到本地后能够发现如下目录，将fonts和style.css目录导入本身的项目中

如：fonts目录导入项目的common/fonts下

style.css导入项目的common/stylus，因为我项目是用stylus，因此把styly.css修改为stylus代码变成icon.styl， 可根据自身状况而定

5. 在html css中引用

该图是style.css中的类名

// 类名是style.css文件中给定的类名
// .html
<span class="icon-close"></span>

// .css
.icon-close{
    font-size: 16px
    color: #000
}
    
复制代码

二. 如何追加新的字体图标

咱们在作项目的时候，常常会在后期想添加新的字体图标，方法有两种：

1. 当有第一次制做字体图标下载后生成的.json文件时

1.1 这个比较简单，直接进入icomoon网站-->icoMoon App --> import icons --> 选择第一次生成的.json文件 --> 原先的字体图标出现 --> import icons --> 选择新.svg文件 --> ...（接下来就跟从新制做字体图标差很少，就不过多说）

2. 当咱们是团队开发项目，没有一开始的.json文件时

2.1 直接进入icomoon网站-->icoMoon App --> import icons --> 选择新的.svg文件--> Generate font --> 点进左上角的preferences修改文件名（好比第一次个人文件名是icon-music，为了防止重复我把此次的文件名改为icon-music1）--> 下载 --> 复制fonts目录下的文件导入项目common/fonts

2.2 重点来了！！！！

将新的style.css部分代码（见下图）

复制到一开始在项目中的style.css（我是icon.styl）

须要把新的代码中的font-family: 'music-icon1'改为'music-icon'来跟起初的代码统一，修改后：

如今你去引用新的字体图标(icon-music-logo)会发现生效了！！！