如何使用阿里云字体图标教程

为什么要使用?

图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦。。 这就是字体图标(iconfont)。

字体图标使用流程

阿里图标官方地址:http://iconfont.cn/
打开地址后注册登录。就不多说。
然后点击图标库找自己想要的图标,或者搜索自己想要的图标。
在这里插入图片描述
然后鼠标放到自己喜欢的图标上,点击购物车,添加到购物车。
在这里插入图片描述
点击添加到项目,确定
在这里插入图片描述
在这里插入图片描述
进去后有个点击生成代码,随后就是上图那样式,
在这里插入图片描述
总共有三种添加方式,只不过引入的方式不同,每种方式下都会有相应的代码生成,第一种直接在css里引入,其他两种直接的页面里引入,引入进去之后就是写入各个图标对应的代码。
在这里插入图片描述
把上图的代码直接放进代码就行,例如:

<span class="time"><i class="iconfont icon-mulutubiao">&#xe60e;</i>
  <stl:a href="" style="color: #bbb;">{Channel.Title}</stl:a>
</span>

然后就出来啦!
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值