字体图标库icomoon和iconfont

本地目录：

• 1.iconmoon.io使用教程
• 2.iconfont.cn使用教程
• 3.如何不通过iconfont项目向已有字体图标中添加新的字体图标

1.iconmoon.io使用教程

icomoon是一个图标很全的字体库，以下介绍一下使用方法。
1.首先，打开官网https://icomoon.io/
2.点击右上角的icomoon APP
3.如果需要上传ui制作的svg文件，则点击左上角的Import Icons（上传文件）---->Untitled Set---->点击即可选择下载。
如果是下载网站上已有的字体图标，则选项相应的字体图标后点击右下角的Genetate Font---->点击右下角的Download
4.这时候我们会获得一个icomoon压缩文件，解压后的文件如下：

文件夹.png

这个文件夹的每一个文件都有用，请不要随意删掉
接下来我们主要有两种方式可以在项目中使用字体图标
第一种是添加伪元素的方式
首先需要在项目的样式文件中声明字体： 告诉别人我们自己定义的字体（路径一定要根据自己的文件存放位置改对，这样才能让css文件成功的找到我们要引入的fonts。）

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

然后需要给要使用字体的标签声明字体，如span

span {
    font-family: "icomoon";
}

最后给这个标签添加伪元素

span::before {
         content: "\e900";
    }

或者直接在标签中添加
对应的代码去demo.html中查找。
第二种方式是通过类样式使用字体图标
我们需要在项目中引入style.css这个文件，同时fonts文件夹也是需要放到style.css能够引用到的项目文件中。
接下来在要使用字体的标签上添加“iconmoon icon-xxx”就可以了，icon-xxx也可以在demo.html文件中查找
5.追加新图标到原来库里面
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做
把压缩包里面的selection.json 重新上传，然后，选中自己想要新的图标，用新下载压缩包解压出来的文件，替换掉原来的文件即可。

2.iconfont.cn使用教程

第一步：百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤不再赘述。
第二步：找到网页右上角的图标管理->我的项目->然后新建项目
第三步：项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车
第四步：添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,点击“确定”后页面会自动跳转到该项目中
第五步：接下来一步比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件
注意：把下载到本地的文件解压后全部放在项目的目录中,再在你的项目中引入iconfont.css文件
如果感觉上面这种方式太麻烦，也可以“下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式”，生成最新链接，然后复制链接进行访问，将网页中的代码复制到项目中的css文件中。
第六步：如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名，如
通过元素的font-size属性可以控制图标的大小。

3.如何不通过iconfont项目向已有字体图标中添加新的字体图标

今天接到一个需求，要往项目中添加一个字体图标。按照以往的惯例，就是在iconfont网站的我的项目添加需要的字体图标就行了。但这个需求是个临时需求，不想用这种方式。
于是，就想直接在现有的字体图标中添加。
解决方案
第一步
在iconfont网站找到你需要的字体图标，将其添加到购物车中。然后，打开你的购物车，选择下载代码

image.png

image.png

第二步
解压下载的文件包，如图

image.png

第三步
将其中以eot/svg/ttf/woff/woff2结尾的文件进行更名，如图

image.png

第四步
将改名字的文件移入前端项目中

image.png

第五步
打开刚才下载的iconfont.css文件，将引用的文件名同步修改

image.png

第六步
打开前端项目中的iconfont.css，将刚修改的css代码复制进来

image.png

这样就大功告成了，一个新的字体图标就加入进来了。