Vue.js项目中使用Iconfont字体图标

  1. 进入网站:Iconfont网址:http://www.iconfont.cn
  2. 点击网站上方的“官方图标库”,选择自己喜欢的图标。在这里我选择天猫的图标库。
  3. 选择好自己喜欢的图标,你可以有两个选择,下载代码 和 添加至项目。
  4. 我们这两选择添加至项目,然后新建项目,并输入名称。
  5. 项目添加好后,会自动给我们转入到我们项目库中。点击查看在线链接。
  6. 生产css引入的代码,生成后就可以在项目首页index.html引入了。
<link rel="stylesheet" href="http://at.alicdn.com/t/font_657604_xujhsb9zlug3z0k9.css">

图标顺利引入到项目中,已经可以使用它们了,在“我的项目中”你会看到图标的font class值。
这里写图片描述

在需要图标的地方这样写就可以看到效果了

<i class="icon iconfont icon-wode"></i>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值