像打字同样插入图标-iconfont

简介

- iconfont是什么？

就像名字同样，iconfont就是图标字体，像雅黑字体，思源字体同样，这种字体就是由图标构成~

- 有何优点？

一、轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会立刻渲染出来，不须要下载一个图像。能够减小HTTP请求，还能够配合HTML5离线存储作性能优化。

二、灵活性：图标字体能够用过font-size属性设置其任何大小，还能够加各类文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。能够在任何背景下显示。使用位图的话，必须得为每一个不一样大小和不一样效果的图像输出一个不一样文件。

三、兼容性：网页字体支持全部现代浏览器，包括IE低版本。详细兼容性能够点击这里。

- 有何劣势？

一、图标字体只能被渲染成单色或者CSS3的渐变色。（问题很小,不要慌）

二、使用版权上有限制，有好多字体是收费的。固然也有不少免费开源的精美字体图标供下载使用。（问题很小）

三、创做自已的字体图标很费时间，重构人员后期维护的成本偏高。（问题很小）

基于上面的分析，能够看出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;//改变透明度
  ...//没错，操做起来就像字体同样，纵享丝滑
}

最后

谢谢你们，有问题请在评论区指出