详解使用icomoon生成字体图标的方法并应用

时间 2020-02-15

标签详解使用 icomoon 生成字体图标方法应用繁體版

原文原文链接

最近项目大量用到字体图标，你们也知道，字体图标任意缩放不会失真，也大大减小请求数量，很是好用。如下将讲解本人如何根据美工提供的.svg文件生成字体图标并应用。css

借助一个在线生成工具：https://icomoon.io/app/#/selecthtml

一、进入网址：主页面app

二、新建一个图集ide

三、添加.svg图片（能够使用现成的，也能够使用自定义的）svg

使用现成的点击页面红色的Add Icons...
工具

使用自定义的直接拖拽进图集便可添加字体

四、生成字体文件spa

（1）选择好要生成的图标（自由选择）.net

（2）点击底部的："Generate Font F"orm

能够自由命名

五、修改完成后，点击生成Font

下载到压缩文件：

运用：将fonts文件夹所有内容和style.css文件放到相应的项目中。

根据css文件下面生成的class类的名称添加到html对应的节点上便可添加字体。

固然添加字体还须要设置font-size，也能够根据实际状况设置color改变其颜色。