vue项目中如何使用fontisto图标库,亲测!

本人在开发vue+element的项目中使用的icon一直是element的icon,但是最近看了element-plus的文档说后续要把icon单独拿出来了,然后需要像用其他icon库一样npm下载,既然同样需要单独npm一个icon库为什么我不用其他老牌的,专门做icon的呢?毕竟人家资历和专业性在这。
于是在网上找了一个icon库——fontisto,主要有以下特点:

  • 完全免费用于商业用途。
  • 不需要使用 Javascript。
  • 支持使用 CSS。
  • 完美适配高分辨率显示器。
  • 图标是可伸缩的。
    而且感觉很小众没什么人用,看这首页也感觉很刁!
    在这里插入图片描述
    可惜文档里并没有教怎么引用,只教你怎么npm,对于我这种懒人肯定极其不舒服。
    闲话不多说,直接重仓空进去
    npm,官网里也有
$ npm install fontisto

在main.js全局中引用

import 'fontisto/css/fontisto/fontisto.css'

然后就能随意的在项目中使用啦,可以参考官网给的例子:

<i class=“fi fi-twitter”></i>fi fi-twitter
<i class=“fi fi-facebook”></i>fi fi-facebook
<i class=“fi fi-instagram”></i>fi fi-instagram
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值