iconfont的使用方式

iconfont 官网

iconfont特点

1、兼容性良好,支持ie8+,及所有现代浏览器。
2、使用class来定义图标,替换图标时,只需要修改class里面的unicode引用。
3、本质上是使用字体,所以多色图标不支持。

如何使用

下面随便找一个icon测试使用

在这里插入图片描述

找到图标鼠标移入点击下载

在这里插入图片描述

这么多使用方式,下面我要说的是使用class的方式使用

首先把图标添加入库 点击添加项目,没有项目新建项目就ok了

在这里插入图片描述

然后在查看在线链接的地方点击预览字体

在这里插入图片描述

在预览字体中有相应的使用说明

在这里插入图片描述

分如下三步骤:

第一步:在 HTML 页面为字体增加 preload,提升字体加载速度:

<link rel="preload" href="//at.alicdn.com/t/font_2533860_5u9oizzb1bo.woff2" as="font" type="font/woff2" crossorigin="anonymous">

第二步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="//at.alicdn.com/t/font_2533860_5u9oizzb1bo.css">

第三步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont icon-xxx"></span>

在这里插入图片描述
类名在这里鼠标移入点击复制就ok了

需要注意的是在类名前面要加上iconfont ,还有当你再次添加新的图标时,要生成新的链接

例:<i class="iconfont icon-eCharts"></i>

在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值