-什么是iconfont？和名字一样，iconfont是一种图标字体，和雅黑字体、思源字体一样，这种字体都是由图标组成的~-有什么优点呢？1.轻量级：图标字体小于一系列图像（尤其是在Retina屏幕上使用双图像）。加载图标字体后，将立即呈现图标，而无需下载图像。它可以减少HTTP请求并使用HTML5离线存储优化性能。2.灵活性：图标字体可以通过font-size属性设置为任意大小，还可以添加多种文字效果，包括颜色、悬停状态、透明度、阴影、翻转等效果。可以显示在任何背景上。使用位图必须为每个不同大小和效果的图像输出不同的文件。3.兼容性：网络字体支持所有现代浏览器，包括低版本的IE。有关详细的兼容性，请单击此处。-缺点是什么？1.图标字体只能呈现为单色或CSS3渐变。（问题很小，不用慌）2.版权有使用限制，收费的字体很多。当然也有很多免费开源的精美字体图标可供下载使用。（问题很小）3.自己制作字体图标需要时间，重构人员后期维护成本比较高。（问题很小）根据上面的分析，可以看出iconfont基本上没有缺点（滑稽）。那么这么好的东西哪里可以买到呢？如何使用本文使用了阿里妈妈的图标库。第1步：访问网站。点击桌面的浏览器，输入http://www.iconfont.cn/，“砰”的一声回车。第二步：选择喜欢的图标，点击购物车按钮。第3步：完成选择后，点击右上角的购物车按钮。第四步：点击添加到项目，如果没有项目，新建一个项目（“添加项目”按钮右侧有一个浅灰色按钮），点击确定第五步：点击下载到本地。第六步：点击下载的文件，点击demo。第七步：看上面的教程就可以了~嘿嘿嘿，三种不同参考的区别和注意事项！Unicode参考特性：-最佳兼容性，支持ie6+和所有现代浏览器。-支持按字体动态调整图标大小、颜色等。-但因为是字体，所以不支持多色。平台上只能使用单色图标，即使项目中有多色图标，也会自动去色。注意：这里需要填写src中对应的路径，下载的文件（上一步下载的那个）中名为iconfont的eot、woff、ttf、svg文件一定要丢到font-class中vue项目中参考与使用unicode的方式相比，具有以下特点：-兼容性好，支持ie8+，以及所有现代浏览器。-与unicode相比，语义清晰，书写更直观。很容易看出这个图标是什么。-因为类是用来定义图标的，当要替换图标时，只需要修改类中的unicode引用即可。-但是，由于本质上还是使用了字体，所以仍然不支持多色图标。注意：要使用这种引用，只需要将下载文件中名为iconfonttypecss、svg、ttf、eot的文件丢到vue项目中即可。Symbolreference这是一种全新的使用方式，应该说是未来的主流，也是目前平台推荐的使用方式。这个用法其实就是svg的集合。与其他两者相比，它具有以下特点：-支持多色图标，不再受限于单色。-通过一些技巧，支持像字体一样通过font-size和color来调整样式。-兼容性差，支持ie9+，以及现代浏览器。-浏览器渲染svg性能一般，不如png。注意：-使用此引用，只需要将下载文件中名为iconfont.js的文件丢到Vue项目中即可-当阿里图库中的图标添加到项目中时，如果你编辑了项目的颜色icon或者icon本身是有颜色的，所以通过symbol获取icon时，会在svg的路径中加上fill属性，导致无法改变颜色。如果需要动态修改颜色，需要操作css操作图标，经过上面的一些步骤。我相信你我已经能看到这条咸鱼了。.icon-xia{font-size:40px;//字体大小与宽度和高度一样大vertical-align:middle;//这条线垂直居中不太舒服color:red;//改变颜色opacity:.6;//改变透明度...//没错，它像字体一样工作，享受丝般顺滑}最后，谢谢大家有什么问题可以在评论区指出
