开发辅助 | 阿里图标库iconfont入门使用

2018-06-24 02:19:50来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/);简单的临时开发或者活动页,直接下载使用即可(场景1),对于周期性的项目开发,以及后期需要长期运营的大中型项目(场景2),个人还是建议在项目中添加iconfont项目;


 使用场景 一: 单个图标直接引用

注册iconfont账号后,如果只使用单个icon,直接下载

添加购物车;下载素材,设置颜色、大小、格式

下载解压后,直接使用即可

此种方式适合用在图标引用特别少,以后也不需要特别维护的场景:

  • 比如设计师用来做demo原型。
  • 前端临时做个活动页。
  • 当然如果你只是为了下载图标做PPT,也是极好的。
  • 不过如果是成体系的应用使用,建议把icon加入项目,然后使用下面三种推荐的方式。

 


 

使用场景 二:大中型项目中使用 - font-class引用

tips:该方法较为常用,之前淘宝网用此方法实现所有页面图标,目前我们公司正式使用这种方式引入图标,特点如下:

  • 兼容性好,支持ie8+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 语义明确,本质上还是使用的字体,所以多色图标还是不支持的,需要在加入iconfont项目之前选上所需的颜色;

使用步骤:

  1. “图标管理”--“我的项目”--“新建项目”,首页搜索,将选中的图标添加到购物车,在购物车中添加到项目;
  2. 下载解压后,打开iconfont.css, src引用只改成base64格式的引用,引入项目index中使用
  3. 注意:当在iconfont的项目中新添加了icon,需要重新下载,覆盖之前的url和类
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         @font-face {font-family: "iconfont";
 8           src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUgAAsAAAAAB2gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kjpY21hcAAAAYAAAABdAAABhp0wBr5nbHlmAAAB4AAAAUkAAAFU7+23n2hlYWQAAAMsAAAAMQAAADYQ292haGhlYQAAA2AAAAAgAAAAJAfeA35obXR4AAADgAAAAAwAAAAMC+r/92xvY2EAAAOMAAAACAAAAAgAdgCqbWF4cAAAA5QAAAAfAAAAIAESAF1uYW1lAAADtAAAAUUAAAJtPlT+fXBvc3QAAAT8AAAAIQAAADJpgudveJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sk4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDz7x9zwv4EhhrmBoQEozAiSAwA2iQ1reJzFkMENgDAMAy9t6QMxCA8G4sUcnbhjtJhQHkxQS44Vx1KiAAsQxUNMYBfGg1OuuR9Z3U+eyVIjUGrrXf2nimiWXYNKZhps3uo/Nq/76PQVyqBOrO0l4QbfrQ+HAAAAeJwVTr1OwmAA/K6lpSBt7dc/WihtqVAJCOHXwfAzuGAcTJxMXFxNdGVxYDFxcPAZDImPIAOD0ccwDAYXFxcHnYrl7nLJJZfcEY6Q9Qe7YLNEJbukSQ7JCSHgqyhKjAM/7NSZKnSf001NYsMg9JNBsc72YRZ5zWj1OmWTT/IyJBTQ9lu9sM6E6HYGzAFahgNYOfuUlvKUfUA6GxZuoyPmEbob5OXBXjSuDbWWpwqTDKUWpfcCz3ECwyRkCVemkeJSaT6acbKtL9wK4yJjhfbxmejl6MVd59opmSlgOoWa86SnoWIrsW5sQ6VWclsUsrYY7GiYfG5l1YxTXpEYWP+uZwmBPSdOHMoN1LH5zhtmWykgtpgD7G+M/avNV7SvNudLxfdHqHjvb0u3glGQx2Xj9ZtC7b58aS6iZ68CiNFPXMEYXjzzDw4PPAsAAAB4nGNgZGBgAOIZqkpp8fw2Xxm4WRhA4Nq9M5dg9P/v/5ewcDDHALkcDEwgUQBf+A2oAAAAeJxjYGRgYG7438AQw8L4//v/nywcDEARFMAMAKAqBmMEAAAAA+kAAAQB//cAAAAAAHYAqnicY2BkYGBgZghkYGUAASYg5gJCBob/YD4DABD3AXAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAmZGJkZmRhYGxgiUjPzeVgQEADl8CQgAAAA==') format('woff')
 9         }
10 
11         .iconfont {
12           font-family:"iconfont" !important;
13           font-size:16px;
14           font-style:normal;
15           -webkit-font-smoothing: antialiased;
16           -moz-osx-font-smoothing: grayscale;
17         }
18 
19         .icon-home:before { content: "\e6fe"; }
20     </style>
21 </head>
22 <body>
23     <i class="iconfont icon-home"></i>
24 </body>
25 </html>
View Code

 

其他:symbol引用

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法;

这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。

tips:

(1)由于只支持ie9以上的浏览器,浏览器渲染svg的性能一般,还不如png,所以推荐font-class引用方式;

(2)由于现在大部分的公司都是要兼容IE8的,等将来有一天大家心照不宣放弃可恶的IE,或只支持IE9以上的话,可以使用该方式

(3)帖子提炼于iconfont官方使用帮助 http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

(4)欢迎批评指正 wx:boan910227

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS text-align:justify;实现两端对齐

下一篇:vue零基础学习--搭建项目