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

为什么要使用iconfont?

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

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

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

3.更小的存储

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

要怎么使用iconfont

下载

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

2.找到图标管理->我的项目->然后新建项目
阿里巴巴iconfont的正确使用方式_第1张图片
点击新建项目,用于保存自己常用的图标
阿里巴巴iconfont的正确使用方式_第2张图片我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。
3.项目新建完成后,往项目里添加我们想使用的图标
阿里巴巴iconfont的正确使用方式_第3张图片
找到图标库,搜索一个想要的图标,然后添加到购物车
阿里巴巴iconfont的正确使用方式_第4张图片
4.添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定
阿里巴巴iconfont的正确使用方式_第5张图片
自动跳转到对应的项目里了
阿里巴巴iconfont的正确使用方式_第6张图片
5.接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件


原文链接

你可能感兴趣的:(阿里巴巴iconfont的正确使用方式)