zoukankan      html  css  js  c++  java
  • 开发辅助 | 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和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

  • 相关阅读:
    HAProxy、Keepalived 在 Ocatvia 的应用实现与分析
    Octavia 的 HTTPS 与自建、签发 CA 证书
    Octavia 创建 loadbalancer 的实现与分析
    OpenStack Rally 质量评估与自动化测试利器
    自建 CA 中心并签发 CA 证书
    Failed building wheel for netifaces
    通过 vSphere WS API 获取 vCenter Datastore Provisioned Space 置备空间
    OpenStack Placement Project
    我们建了一个 Golang 硬核技术交流群(内含视频福利)
    没有图形界面的软件有什么用?
  • 原文地址:https://www.cnblogs.com/wuhaoquan/p/8652119.html
Copyright © 2011-2022 走看看