目前大多数的互联网公司，前端开发和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技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  9. VUE 引入阿里图标库

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

随机推荐

  1. dataGridView 设置

    //窗体加载事件 //内容居中 dataGridView1.RowsDefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleCe ...

  2. Windows Server 2008 R2 搭建DNS服务器（转）

    Windows Server 2008 R2 搭建DNS服务器将本机IP设为首选DNS服务器的地址在dos 下分别输入 nslookup www.mydns.com 和 nslookup 192.16 ...

  3. 【剑指Offer】20、包含min函数的栈

      题目描述:   定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)).   解题思路:   使用两个stack,一个为数据栈,另一个为辅助栈.数据栈 ...

  4. php第五节课

    封装 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  5. jenkins+svn+tomcat部署war包

    svn是版本控制器,是提供一个版本库让程序员把项目提交上去,每一次更新代码提交后都会记录 jenkins是持续部署的工具,是让项目自动部署发布出去的工具,当项目代码发生改变时就需要重新打包成war包, ...

  6. Hexo系列(三) 常用命令详解

    Hexo 框架可以帮助我们快速创建一个属于自己的博客网站,熟悉 Hexo 框架提供的命令有利于我们管理博客 1.hexo init hexo init 命令用于初始化本地文件夹为网站的根目录 $ he ...

  7. poj 2763(LCA + dfs序 +树状数组)

    算是模板题了 可以用dfs序维护点到根的距离 注意些LCA的时候遇到MAXM,要-1 #include<cstdio> #include<algorithm> #include ...

  8. 3.IDEA+Maven+Spring注解+Servlet+MyBatis

    1.创建项目模块 2. 选择创建的项目类型,maven的web项目 3.输入项目名 4.选择自己配置的本地maven库 5.创建项目 6.查看项目结构 7.配置项目的依赖pom.xml <?xm ...

  9. svn_精简版【极速安装】

    1.进入官网下载:http://tortoisesvn.net/ 2.进行安装. 3.官方下载汉化包 [32 位,64位] 4.安装完汉化包后,右键->Settings 5.选择语言包,确定就o ...

  10. sqlserver日志文件太大解决方法

    SQL Server 的事务日志意外增大或充满的处理方法 事务日志文件Transaction Log File是用来记录数据库更新情况的文件,扩展名为ldf. 在 SQL Server 7.0 和 S ...