使用腾讯云建设网站,全国失信被执行人名单查询,wordpress page id,医药网站建设中图片目前大多数的互联网公司#xff0c;前端开发和UI设计师配合中#xff0c;针对设计师给图的效果图#xff0c;前端开发工程师不再像往常一样对于细小图标进行切图#xff0c;取而代之的是引用阿里图标库#xff08;http://iconfont.cn/#xff09;#xff1b;简单的临时开… 目前大多数的互联网公司前端开发和UI设计师配合中针对设计师给图的效果图前端开发工程师不再像往常一样对于细小图标进行切图取而代之的是引用阿里图标库http://iconfont.cn/简单的临时开发或者活动页直接下载使用即可场景1对于周期性的项目开发以及后期需要长期运营的大中型项目场景2个人还是建议在项目中添加iconfont项目 使用场景 一 单个图标直接引用
注册iconfont账号后如果只使用单个icon直接下载
添加购物车下载素材设置颜色、大小、格式
下载解压后直接使用即可
此种方式适合用在图标引用特别少以后也不需要特别维护的场景
比如设计师用来做demo原型。前端临时做个活动页。当然如果你只是为了下载图标做PPT,也是极好的。不过如果是成体系的应用使用建议把icon加入项目然后使用下面三种推荐的方式。 使用场景 二大中型项目中使用 - font-class引用
tips该方法较为常用之前淘宝网用此方法实现所有页面图标目前我们公司正式使用这种方式引入图标特点如下
兼容性好支持ie8 及所有现代浏览器。支持按字体的方式去动态调整图标大小颜色等等。语义明确本质上还是使用的字体所以多色图标还是不支持的需要在加入iconfont项目之前选上所需的颜色
使用步骤
“图标管理”--“我的项目”--“新建项目”首页搜索将选中的图标添加到购物车在购物车中添加到项目下载解压后打开iconfont.css, src引用只改成base64格式的引用引入项目index中使用注意当在iconfont的项目中新添加了icon需要重新下载覆盖之前的url和类 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 titletest/title6 style7 font-face {font-family: iconfont;8 src: url(data:application/x-font-woff;charsetutf-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 classiconfont 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?spma313x.7781069.1998910419.d8cf4382ahelptypecode
4欢迎批评指正 wxboan910227
