《前端》阿里字体库iconfont使用方法

本文介绍了如何使用阿里字体库Iconfont。首先,通过账号登录阿里图标库,搜索并下载所需图标到本地。接着,引入iconfont.css文件到HTML,并在相应位置插入图标代码。需要注意的是,不同批次下载的iconfont.css文件可能包含不同图标的样式,不建议分开下载,最好一次性获取所有需要的图标。
摘要由CSDN通过智能技术生成

1、到阿里字体库网站中,登录账号。http://www.iconfont.cn/

       我的账号是我的126邮箱。

2、在图标库中查找自己需要的图标,并加入购物车,添加至项目中。最后下载到本地。

3、如何将想用的图标应用在html网页中?

下图为下载的阿里图标。

     首先将iconfont.css文件引入到html中(注意路径):

    <link rel="stylesheet" rev="stylesheet" href="css/iconfont.css" type="text/css" media="all" />

再将需要的图标代码引入html对应位置:

<span class="iconfont">&#xe626;</span>

注意:使用过程中需要的图标尽量一次性下载完,然后使用。这样图标的 iconfont.css 文件是同一个文件。

虽然小图标的代码一样,但是每次下载 iconfont.css文件。它里面的样式是有针对性的。不是所有图标的样式。所以当分批次下载图标时候,iconfont.css文件内容不一样。应该是可以汇总在一起的。但是毕竟麻烦。我也尝试汇总一起,也不行,应该是还有东西需要修改。

完成!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值