Font Awesome 的使用

78c3e8048f724c3a230b436a66c22805.png

之前一直使用的是 iconfont,阿里巴巴出品的一个字体图标库。但是最近 iconfont 不再支持 CDN 引入,只能本地下载,这样一来修改图标就非常的麻烦。

于是,就找了一个类似的图标库,现在使用的比较多的一个国外字体图标库。使用方式和iconfont有些不同。font awesome需要下载整个库。而阿里巴巴图标库可以定制下载。较为灵活。

使用 Font Awesome 需要先注册一下:

https://fontawesome.com/

然后同样支持多种方式引入,包括下载和 CDN 引入,通过 CDN 引入非常的方便那我们就选择 CDN 的方式。

4c2794dddca81a48b59e09fc8c1885d9.png

点击 kits 按钮,进入工具页面,然后会有一个 CDN 地址,把这个地址添加到项目中即可。

<script src="https://kit.fontawesome.com/fff3aa0c8a.js" crossorigin="anonymous"></script>
// 使用
<i class="fa-solid fa-house"></i>

可以在网站中搜索任意想要的图标,需要注意的是有部分图标是收费,基本上来说免费的图标就已经够我们使用了,影响并不大。

7534eb71249930236c1b25a50a4d0537.png

当我们选择图标之后,就可以复制代码在项目中使用,而且无需修改 CDN 地址。

852e31f6ed21526c3a559031db74aa51.png

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值