开发辅助 | 阿里图标库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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369846.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计量经济学建模_一分钟看完计量经济学

建模是计量的灵魂&#xff0c;所以就从建模开始。一、建模步骤建模步骤&#xff1a;A&#xff0c;理论模型的设计: a&#xff0c;选择变量b&#xff0c;确定变量关系c&#xff0c;拟定参数范围B&#xff0c;样本数据的收集: a&#xff0c;数据的类型b&#xff0c;数据的质量C&a…

制图折断线_【机械制图】机械设计中的尺寸标注,看懂复杂机械图纸!

专注于机械行业、专业、职业信息分享服务于制造业百万工程师推荐阅读【机械制图】画图这么久&#xff0c;线型都没搞懂&#xff1f;【机械制图】机械图纸知识解析&#xff0c;这个总结溜溜的【机械制图】机械图纸尺寸标注规则&#xff0c;通过动图复习一下&#xff01;知名机械…

CCS3的过渡、变换、动画以及响应式布局、弹性布局

CSS3 过渡 、变换、动画 在没有CSS3之前&#xff0c;如果页面上需要一些动画效果&#xff0c;要么你自己编写 JavaScript&#xff0c;要么使用 JavaScript 框架(如 jQuery)来提高效率。 但是CSS3出来之后&#xff0c;有能力做一些如平滑过渡(比如在鼠标悬停时)和在屏幕上移动元…

BZOJ2659: [Beijing wc2012]算不出的算式

2659: [Beijing wc2012]算不出的算式 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 1489 Solved: 891[Submit][Status][Discuss]Description 算不出的算式 背景&#xff1a; 曾经有一个老掉牙的游戏放在我面前&#xff0c;我没有珍惜。直到这个游戏停产才追悔莫及。人世间…

go 修改结构体方法_「GCTT 出品」Go 系列教程——26. 结构体取代类

Go语言中文网&#xff0c;致力于每日分享编码、开源等知识&#xff0c;欢迎关注我&#xff0c;会有意想不到的收获&#xff01;Go 支持面向对象吗&#xff1f;Go 并不是完全面向对象的编程语言。Go 官网的 FAQ 回答了 Go 是否是面向对象语言&#xff0c;摘录如下。可以说是&…

分组后分页_SQL(约束、视图、分页、序列、索引、同义词、创建用户,为用户授权、执行计划的使用 数据的导入导出)...

学习主题&#xff1a;SQL学习目标&#xff1a;掌握约束掌握视图修改表名与删除表删除表中的列语句的语法结构是什么&#xff1f;答&#xff1a;delete 表名from table where ;删除表中的列语句的语法结构是什么&#xff1f;答&#xff1a;delete 表名from table where ;截断表的…

第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息...

第三百三十四节&#xff0c;web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻&#xff0c;爬取Ajax动态生成的信息 crapy爬取百度新闻&#xff0c;爬取Ajax动态生成的信息&#xff0c;抓取百度新闻首页的新闻rul地址 有多网站&#xff0c;当你浏览器访问时看到的信息&#xf…

20170117小测

今天再次迎来了我们的例行考试。 T1&#xff1a; 首先我们考虑那些点是可以共存的&#xff0c;我们可以枚举一个质数做他们的gcd&#xff0c;然后把这些点放在一张图里求直径。所以我们要做的就是把这些点的值分解质因数&#xff0c;对每个质因数挂一个链&#xff0c;代表有那些…

iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

网页中的select下拉列表&#xff0c;文字太长的话在iOS的Safari浏览器里会被自动截断&#xff0c;显示成下面这种&#xff1a; 安卓版的浏览器则没有这个问题。 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢&#xff1f;答案是使用<optgroup></optgroup>…

Servlet 开发

1. Servlet &#xff08;很久远的东西&#xff0c;但是现在学习原理&#xff09; html css js 前端页面&#xff08;静态的&#xff09; form action ".html" Servlet 允许将action属性设置为映射&#xff0c;通过映射找到相关的Servlet class 进行数据的处理。…

CentOS 7 Flannel的安装与配置

1. 安装前的准备 etcd 3.2.9 Docker 17.12.0-ce 三台机器10.100.97.236, 10.100.97.92, 10.100.97.81 etcd不同版本之间的差别还是挺大的&#xff0c;使用V3版本跟Flannel整合起来会有坑&#xff0c;下文详解。 2. 安装 sudo yum install -y flannel 安装后&#xff0c;版本是0…

给Ambari集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤(图文详解)...

不多说&#xff0c;直接上干货&#xff01; Impala和Hive的关系&#xff08;详解&#xff09; 扩展博客 给Clouderamanager集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤&#xff08;图文详解&#xff09; 参考 hortonworks ambari集成impala ambari hdp 集成 imp…

html中常见的小问题(1)

问题&#xff1a;自适应高度的块级元素内添加图片后&#xff0c;其高度会比图片高度多出一块 简单代码如下&#xff1a; <!doctype html> <html><head><style>.box{width:533px;margin:100px auto;border:1px solid red;}</style></head>…

JmeterAnt构建自动化测试平台

一、jmeter jmeter下载地址为&#xff1a;http://jmeter.apache.org/download_jmeter.cgi 下载完成后&#xff0c;解压文件&#xff0c; 加压后&#xff0c;到biin目录下&#xff0c;点击jmeter.bat启动jmeter(如果是linux环境&#xff0c;给jmeter.sh可执行的权限&#xff0c;…

input复选框checkbox默认样式纯css修改

修改之前的样式 修改之后的样式 html <input type"checkbox" name"btn" id"btn1"><label for"btn1">按钮1</label> css input[type"checkbox"]{width:20px;height:20px;display: inline-block;text-al…

c++word书签_「职场必备」干货!WORD办公软件快捷键,小编整理拿走不谢

小编工作时的照片&#xff0c;不上镜CtrlShiftSpacebar创建不间断空格Ctrl -(连字符)创建不间断连字符CtrlB使字符变为粗体CtrlI使字符变为斜体CtrlU为字符添加下划线CtrlShift缩小字号CtrlShift>增大字号CtrlQ删除段落格式CtrlSpacebar删除字符格式CtrlC复制所选文本或对象…

前端学习---css基本知识

css基本知识 我们先看一个小例子&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><div style"background-color:#2459a2;height:…

mysql 从库_mysql数据库主从配置

在一篇文章《离线安装mysql数据库》,讲解了离线安装mysql数据库的过程&#xff0c;本文将讲解mysql数据库的主从配置方法。mysql数据库进行主从配置后&#xff0c;可以实现数据库的备份、同时应用也可以实现读写分离&#xff0c;提高应用的并发量。1、主从原理从《高性能mysql》…

前端学习---html基础知识

HTML基本知识 学习html首先我们先看看HTML本质&#xff1a; web框架本质 我们在学socket&#xff0c;我们创建一个socketserver&#xff0c;然后运行起来&#xff0c;有一个client客户端要连接socket服务端&#xff0c;连接上之后&#xff0c;如果两边都没有close&#xff0…

前端:css

一,css介绍 CSS&#xff08;Cascading Style Sheet&#xff0c;层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表&#xff0c;它就会按照这个样式表来对文档进行格式化&#xff08;渲染&#xff09;。 二,CSS语法 1,每个CSS样式由两个组成部分&#xff1a;选择器…