web开发字体图标制作

在开发前端项目时候会用到很多图标，之前一直用到图片，用图片会对项目包的大小有很大的影响（不只此影响，还有更多。。。。）。现在在项目中都用字体图标来处理项目中都icon,使用起来也很方便同时大大都减少了项目包都大小。
下面就总结下我在项目中怎么使用字体图标的。

1、首先找到字体图标网站 国内一般使用 阿里巴巴的https://www.iconfont.cn/
登录上去进去搜索自己需要的图标，然后点击下载，选择svg格式的，下载到本地


2、在本地下载好要用到的图标后打开https://icomoon.io/app/#/select这个网站

打开网站后选择左上角菜单 选择New Empty Set

选择New Empty Seth后就会生成自己的图标集文件，点击右边三杠 选择properties

选择properties后在弹出框点击Edit Metadata按钮填写相关信息

点击Edit Metadata按钮后弹出框填写字体名就可以,然后点击关闭

关闭弹窗后，在选择右边三杠，选择import to Set，将下载在本地的svg字体导入进来

导入后效果

然后拖动鼠标全选中图标，点击下面的Generate Font按钮

然后点击下面的Download下载在本地

解压下载后的文件，打开就可以看到我们生成的字体图标的所有文件，此时字体图标已经生成了，然后引入到项目就可以了。

其中我们在项目中主要用到到是fonts文件夹下的文件和style.css文件

3、将生成好的字体图标引入到项目中：
将fonts文件夹和style.css文件拷贝，这里以vue项目为例子(其它框架的用法大同小异)
在项目src文件下的assets文件下新建styles文件，将fonts文件夹和style.css文件粘贴在styles文件夹中，这里我将style.css改成icon.css方便区分其它css

然后在项目入口文件中将字体图标引入,vue项目入口文件是main.js

此时就可以在项目中使用字体图标了,class=“icon-uniE900”
icon-是一样的，后面的是你在上传svg图片时候的名称，中文会转码，以为就是英文，比如你上传的svg文件的时候文件名字角book.svg,生成后使用的时候就是class=“icon-book”,还可以给他设置字体大小和颜色

如果在公司中让ui设计师 (或者咱们自己) 将做好的图标上传在公司项目字体图标网站的项目中，上传好执行上面的步骤就可以了。