阿里巴巴iconfont的正确使用方式-阿里云开发者社区

开发者社区> 人工智能> 正文

阿里巴巴iconfont的正确使用方式

简介: 为什么要使用iconfont? 顾名思义iconfont就是把图标用字体的方式呈现,其优点在于以下几个方面: 1.可以通过css的样式改变其颜色(最霸气的理由) 2.相对于图片来说,具有更高的分辨率 3.

为什么要使用iconfont?

顾名思义iconfont就是把图标用字体的方式呈现,其优点在于以下几个方面:

1.可以通过css的样式改变其颜色(最霸气的理由)

2.相对于图片来说,具有更高的分辨率

3.更小的存储

缺点:浏览器兼容性不够普及,所幸目前大部分主流浏览器都支持

要怎么使用iconfont

下载

1.登录:http://www.iconfont.cn/

2.找到图标管理->我的项目->然后新建项目
01
点击新建项目,用于保存自己常用的图标
02
3.项目新建完成后,往项目里添加我们想使用的图标
03
找到图标库,搜索一个想要的图标,然后添加到购物车
00
4.添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定
04
自动跳转到对应的项目里了
05
5.接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件
06
下载后解压文件
08

应用到代码

1.强调:把上面下载的文件都放在一个文件夹内,然后放在项目目录中,再在项目中引入iconfont.css文件,或将iconfont.css文件里的内容复制粘贴到你当前项目的css内容里
09
2.如何在项目中使用字体图标呢,其实很简单,创建一个i标签或span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名
10
具体代码如下:
11
现在刷新页面,图标就出来了
12

备注:我知道很多人以前是用Unicode,但因为其兼容性改为了现在的class名称

感悟:我就是我,是颜色不一样的焰火

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
人工智能
使用钉钉扫一扫加入圈子
+ 订阅

了解行业+人工智能最先进的技术和实践,参与行业+人工智能实践项目

其他文章