通过icomoon生成并使用字体图标

进入网站 https://icomoon.io/

点击icomoon app

通过icomoon生成并使用字体图标_第1张图片
图片.png

选择图标或者导入本地图标

通过icomoon生成并使用字体图标_第2张图片
图片.png

在阿里巴巴矢量图库里可以免费下载到SVG格式图标。
链接地址:http://www.iconfont.cn/

导入完图片 生成字体

通过icomoon生成并使用字体图标_第3张图片
图片.png

配置字体,下载压缩包

通过icomoon生成并使用字体图标_第4张图片
图片.png

解压缩后,将红框里的文件拷贝到项目中

通过icomoon生成并使用字体图标_第5张图片
图片.png

修改一下style.css里面的路径

通过icomoon生成并使用字体图标_第6张图片
图片.png

可以看到css文件里都是生成的字体图标对应的类名和编码

通过icomoon生成并使用字体图标_第7张图片
图片.png

在需要使用字体图标的地方导入style.css文件 为需要添加图标位置的标签添加与该图标对应的类icon-xxxx

通过icomoon生成并使用字体图标_第8张图片
图片.png

你可能感兴趣的:(通过icomoon生成并使用字体图标)