像打字一样插入图标-iconfont

55次阅读

共计 1667 个字符,预计需要花费 5 分钟才能阅读完成。

简介
– iconfont 是什么?
就像名字一样,iconfont 就是图标字体,像雅黑字体,思源字体一样,这种字体就是由图标构成~
– 有何优势?
1、轻量性:一个图标字体比一系列的图像(特别是在 Retina 屏中使用双倍图像)要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少 HTTP 请求,还可以配合 HTML5 离线存储做性能优化。
2、灵活性:图标字体可以用过 font-size 属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover 状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不同文件。
3、兼容性:网页字体支持所有现代浏览器,包括 IE 低版本。详细兼容性可以点击这里。
– 有何劣势?
1、图标字体只能被渲染成单色或者 CSS3 的渐变色。(问题很小, 不要慌)
2、使用版权上有限制,有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。(问题很小)
3、创作自已的字体图标很费时间,重构人员后期维护的成本偏高。(问题很小)
基于上面的分析,可以看出 iconfont 基本没有劣势(滑稽)。
那么这么好的东西,哪里才能买到呢?
使用方法
此文使用阿里妈妈的图标库。
步骤 1:进入网站。
点击桌面上的浏览器,输入 http://www.iconfont.cn/,吧唧一声敲下回车
步骤 2:选择自己喜欢的图标,点击购物车的按钮。

步骤 3:选择完毕后,点击右上角的购物车按钮。

步骤 4:点击添加到项目,如果没有项目则新建一个项目(“加入项目”按钮右边有一个浅灰色按钮),点击确定

步骤 5:点击下载到本地。

步骤 6:点开下载到的文件,点击 demo。

步骤 7:查看上面的教程即可~ 嘿嘿嘿
三种不同引用的区别和注意事项!
unicode 引用
特点:- 兼容性最好,支持 ie6+,及所有现代浏览器。- 支持按字体的方式去动态调整图标大小,颜色等等。- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:这里 src 中需要填写对应路径,你下载到的文件(上一步骤叫你下载的)中名为 iconfont 的 eot,woff,ttf,svg 类型的文件都要扔进 vue 项目中

font-class 引用
与 unicode 使用方式相比,具有如下特点:- 兼容性良好,支持 ie8+,及所有现代浏览器。- 相比于 unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 unicode 引用。- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
注意: 使用这种引用只需要将下载到的文件中名为 iconfont 类型为 css,svg,ttf,eot 的文件扔进 vue 项目中即可

symbol 引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个 svg 的集合,与另外两种相比具有如下特点:- 支持多色图标了,不再受单色限制。- 通过一些技巧,支持像字体那样,通过 font-size,color 来调整样式。- 兼容性较差,支持 ie9+, 及现代浏览器。- 浏览器渲染 svg 的性能一般,还不如 png。
注意:- 使用这种引用只需要将下载到的文件中名为 iconfont.js 文件扔进 vue 项目中即可 - 当从阿里图库中图标被添加至项目,如果编辑过项目图标的颜色或者图标本身是有颜色的,那么在通过 symbol 获取图标时会在 svg 的 path 中增加 fill 属性,导致无法更改颜色,如果需要动态修改颜色,需要这样操作
css 操作图标
经过我们上面一些步骤的操作呢 我相信 你已经能看到这条咸鱼了。

.icon-xia{
font-size: 40px; // fontsize 多大 宽高就多大
vertical-align: middle; // 这个行内垂直居中简直不要太舒服
color: red;// 改变颜色
opacity:.6;// 改变透明度
…// 没错,操作起来就像字体一样,纵享丝滑
}
最后
谢谢大家,有问题请在评论区指出

正文完
 0