使用字体图标

使用流程：

1.UI人员设计字体图标效果图(svg)

2.前端人员上传兼容性字体文件包

推荐网站：

• icomoon字库：https:icomoon.io

优点：允许用户选择各自所需要的图标，使他们成一字型，内容种类繁多，非常全面

缺点：国外服务器，打开网速较慢

• 阿里icon font字库：http://www.iconfont.cn/

优点：包含了淘宝图标库和阿里妈妈图标库，可使用AI制作图标上传生成。免费！

• http://fontello.com

在线定制自己的icon font字体图标字库，也可直接从GitHub下载整个图标集

• http://fortawesome.github.io/Font-Awesome/

更新比较快，目前已有超过369个图标了

• http://glyphicons.com/

在Bootstrap下免费使用，自带了200多个图标

• https://icons8.com/

提供png免费下载，像素能达到500px

3.前端人员下载兼容性文件包到本地

上面的网站会把svg图片转换为字体格式，然后下载下来即可。如果不需要自己专门的字体图标，可以直接到上面的网站上下载。

4.把字体包引用到HTML页面中

第一步：在样式里面声明字体

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

            font-weight: normal;
            font-style: normal;
        }

第二步：给盒子使用字体

        span {
            font-family: "icomoon";
        }

第三步：盒子里面添加结构

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

  或者直接添加 <span></span>

补充：追加新图标到原来库里面

把压缩包里面的selection.json从新上传，然后选中自己想要的新图标，从新下载压缩包，替换原来的文件即可。