目前大多数的互联网公司，前端开发和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和类
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

     <style>

         @font-face {font-family: "iconfont";

           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')

         }

         .iconfont {

           font-family:"iconfont" !important;

           font-size:16px;

           font-style:normal;

           -webkit-font-smoothing: antialiased;

           -moz-osx-font-smoothing: grayscale;

         }

         .icon-home:before { content: "\e6fe"; }

     </style>

 </head>

 <body>

     <i class="iconfont icon-home"></i>

 </body>

 </html>

其他：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

阿里图标库iconfont入门使用的更多相关文章

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

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  2. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  3. 关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  4. 绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解

    在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...

  5. 在微信小程序中使用阿里图标库Iconfont

    首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...

  6. vue中使用阿里图标库iconfont和在旧有的iconfont中添加新的图标

    第一步 下载样式http://www.iconfont.cn/选择图表,点击加入购物车 第二步 解压下载文件 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face ...

  7. 【vue.js】vue项目使用Iconfont（阿里图标库）

    vue项目使用Iconfont(阿里图标库) 2019-11-12  19:07:02  by冲冲 1.操作步骤 ① 登录阿里巴巴矢量图标库 https://www.iconfont.cn ,注册账号 ...

  8. VUE 引入阿里图标库

    本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...

  9. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

随机推荐

  1. 阿里巴巴开源前端框架--Weex实践

    Weex是最近很火很NB的一个技术产品,因为本篇介绍的是怎样使用Weex的最佳实践,所以就不罗里吧嗦的夸它怎么怎么好了,感兴趣的可以访问Weex HomePage,或加入旺旺群:1330170019. ...

  2. Java循环和条件

    下列程序的输出结果是什么? 1.Java循环和条件 /** * @Title:IuputData.java * @Package:com.you.data * @Description:TODO * ...

  3. C#制表符过滤处理方法

    C#制表符过滤处理方法,动态替换字符串里面的制表符. /// <summary> /// Descrioption: ///需要替换字符集合,可参见MSDN /// The Trim me ...

  4. 小白进阶之Scrapy（基于Scrapy-Redis的分布式以及cookies池）

    首先我们更新一下scrapy版本.最新版为1.3 再说一遍Windows的小伙伴儿 pip是装不上Scrapy的.推荐使用anaconda .不然还是老老实实用Linux吧. conda instal ...

  5. Carries SCU - 4437

    Carries frog has nn integers a1,a2,-,ana1,a2,-,an, and she wants to add them pairwise. Unfortunately ...

  6. WebForm 生成并显示二维码

    Generate and display QRCode in WebForm. 项目引用 QRCoder生成并显示 QRCode 项目引用 QRCoder How to use QRCoder Via ...

  7. Python 学习笔记（二）开发环境的搭建

    安装Python windows 下安装: 下载地址:https://www.python.org/downloads Python的版本 3.x 是趋势 2.x 还在被大量使用 至于使用2.x 还是 ...

  8. 号称了解mesos双层调度的你，先来回答下面这五个问题！

    一提mesos,很多人知道双层调度,但是大多数理解都在表面,不然试一下下面五个问题. 问题一:如果有两个framework,一万个节点,按说应该平均分配给两个framework,怎么个分法?一人一台这 ...

  9. jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

    jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...

  10. Kendo UI ASP.Net MVC 实现多图片及时显示加上传（其中有借鉴别人的代码，自己又精简了一下，如有冒犯，请多原谅！）

    View: <div class="demo-section k-content"> @(Html.Kendo().Upload() .Name("files ...