iconfont 字体图标

      目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/相较于精灵图

精灵图虽然有诸多优点,但是缺点还是很明显:

        1.图片文件还是比较大的

        2.图片本身放大和缩小会失真

        3.一旦图片制作完毕想要更换非常复杂

此时有一种技术的出现很好的解决了以上问题,就是字体图标iconfont.

字体图标的优点

        1.轻量 (比图像小,减少服务器请求)

        2.灵活性 (本质是文字,可以改变颜色、阴影、透明 旋转 字体大小等等)

        3.兼容性好:几乎支持所有浏览器

注意! 字体图标不能代替精灵图

使用场景

        字体图标: 结构样式简单的小图标

        精灵图: 复杂的小图片

字体图标的引用方法

        方法一:本地下载

        1. 进入阿里巴巴字体矢量图标库,搜索自己想要的字体图标,加入购物车

 

        2.将购物车里的字体图标添加到项目

 

        3.找到自己的项目,点击下载至本地

 

        4.将压缩包解压出来,复制其中四个文件到自己项目的根目录:

        

 

        5.引入iconfont.css

 

        6.给标签添加一个iconfont类名以及一个相应图标的类名

         点击 Font class 在相应图标下点击复制代码即可获得相应图标的类名

 方法二:线上模式

        1.还是找到想要的图标添加至项目

        2.点击Font class, 点击查看在线链接,然后点击生成在线链接,然后点击复制代码

        3.引入在线链接

        注意! 链接前一定要写http: 不然字体图标可能不会生效

        4.还是一样添加两个类名即可(一个iconfont类名, 一个相应图标的icon-xxx类名)

 

         

        方法三:unicode编码格式

        1.可以使用在线链接及下载至本地的iconfont.css

        2.添加一个类名iconfont ,并在标签里写入相应图标的Unicode编码

        Unicode编码可在自己的字体图标库的项目中点击Unicode查看,一样复制相应图标的Unicode编码

        方法四: 使用伪元素生成字体图标

        1.查看iconfont.css文件,找到相应的图标

        2.将相应编码输入到要用的伪元素的content""中即可

 

以上就是字体图标和精灵图之间的差别 使用环境, 以及字体图标的四种使用方法的介绍