字体图标的使用和项目中添加新的字体图标

• 字体图标的用法
• 新添加字体图标

字体图标的用法

这里推荐2个工具网站,
一个是阿里妈妈字体图标,
一个是icomoon

创建字体文件

1. 在阿里妈妈网站上找到要下载的字体图标,然后下载svg格式
   
2. 打开Icomoon,如下
   引入svg文件
   点击DOWNLOAD下载即可
   
   3.将下载的压缩包解压
   其中只有fonts文件夹和style.css对我们有用
   将fonts文件夹放在自己项目的样式文件夹下即可,style.css可以专门作为一个样式文件
   ttf,woff,svg都是不同的字体格式,各自对浏览器的兼容性不同,所以考虑兼容性这里都引入

新添加字体图标

正常情况下Icomoon网站可以保存我们的下载记录,下次使用可以在原有的基础上添加,重新生成字体,粘贴到项目中替换原有字体文件.
但是如果使我们新接手的项目,我们没有原来的字体怎么办呢???

我们可以想开始一样,重新生成新的字体,导入项目,只是要是style.css中做个改动

fonts文件还是想之前一样导进项目中,
style.css中新添加字体,比如icomoon,url路径要正确,
class^=”icomoon-“,class*=”icomoon-“表示class带有icomoon-的,统一样式.

字体为元素的定义中 content要根据svg文件中对应的unicode来映射,

content:"\e900" => unicode=""

完