Echking's 学习之路 - iconfont
type: channel
link: http://eck.ink/tag/iconfont/
items: iconfont 阿里巴巴矢量图标库使用方法

iconfont 阿里巴巴矢量图标库使用方法
type: item
date: 2021-10-04T01:28:00+08:00
description: 什么是阿里巴巴矢量图标库iconfont？阿里巴巴矢量图标库iconfont是由用户自己制作上传所组成的一套图标库 #我能用阿里巴巴矢量图标库做什么？在iconfont的官方文档中提供了三种使用途径Web端使用Android端使用IOS端使用与之前文章中介绍的Font Awesome（『Font Awesome』?安装教程 为你的网站增加一点有趣的元素）功能类似，但在我看来iconfont相比于Font Awesome有过之而无不及。 首先iconfont内图标数量已经达到了165,767,60个，远超Font Awesome的675个图标QQ截图20211004012930.jpg 其次是iconfont有很多种使用方式，总有一种适合于你 tip：iconfont图标的使用不能超过其允许范围，商业用途需要得到作者授权，更不可直接将图标用于售卖iconfont素材版权说明（官方）该素材仅供广大用户交流学习使用，未经iconfont或其关联公司书面授权许可，不得用于任何商业用途。若希望使用该素材，请提前联系作者，取得授权后再进行使用，避免造成侵犯作者知识产权。如何正确使用阿里巴巴矢量图标库iconfont？Web端1.直接下载单独图标使用例如在iconfont搜索栏输入博客，选择想要的图标，点击下载20211004015012.jpg20211004015123.jpg在下载页你还可以将图标更改成自己喜欢的颜色，以及修改图标大小20211004015224.jpg有三种格式可供下载，分别是svg，ai，png直接下载使用，我们就选择png格式下载就好了2.网页设计中使用iconfont官方提供了三种使用方法具体可以查看iconfont帮助中心①unicode 引用顾名思义，unicode就是以文字的形式来引用iconfont图标优点：可以按字体形式动态调整图标大小和颜色，兼容ie6以上所有浏览器。缺点：不支持多色。unicode使用方法第一步：拷贝项目下面生成的font-face20211004021626.jpg第二步：定义使用iconfont的样式.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}第三步：挑选相应图标并获取字体编码，应用于页面3把想要使用的图标添加入库后就可以带仓库查看到其字体编码20211004021315.jpg例如该图标的编码为②font-class 引用font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。优点：语意明确，书写更直观，兼容性ie8以上所有浏览器；当要替换图标时，只需要修改class里面的unicode引用。缺点：与unicode相同，不支持多色。font-class使用方法第一步：拷贝项目下面生成的fontclass代码：在我的项目中选择Font Class，点击生成链接20211004021908.jpg第二步：挑选相应图标并获取类名，应用于页面：20211004022150.jpg③symbol 引用这是一种全新的使用方式，应该说这才是未来的主流，也是iconfont官方目前推荐的用法。优点：支持多色图标，可以向字体一样调整样式。缺点：兼容性相比于前两种比较差，兼容ie9以上浏览器，浏览器渲染svg的性能一般，还不如png。symbol使用方法第一步：拷贝项目下面生成的symbol代码：20211004022719.jpg第二步：加入通用css代码（引入一次就行）： 第三步：挑选相应图标并获取类名，应用于页面： Android和iOS 使用这两种使用方法建议查看iconfont帮助中心本文引用地址：iconfont帮助中心!