×

Vue开发一学:项目中使用Font Awesome 5

作者:Terry2022.02.20来源:Web前端之家浏览:2981评论:0
关键词:vuejs

Vue开发一学:项目中使用Font Awesome 5。

前端小伙伴们都知道Font Awesome图标库,它具有丰富的常用图标,笔者开发时也经常使用,省却了自己到处找图标的困扰,当然阿里的iconfont也不错,不过它比较杂乱,找的图标有时候不是配套的,尺寸和比例上有些偏差,即使你只使用某一个图标库的图标难免也会有收录不全的情况(这是笔者的使用体验,绝对没有贬低iconfont的意思,勿喷),Font Awesome通过几年的发展已经收录了互联网最常用的图标,绝对能满足大多数人的开发需求(有美工还用自己动手?!!)当然,看标题就知道Font Awesome已经进入5时代,使用方法上也和4以前的版本有所不同,而且还增加了收费版。。。当然免费版已经足够大家使用啦!下面笔者就给大伙儿讲讲如何在自己的vue开发项目中使用Font Awesome 5

安装依赖

1. 安装基础依赖

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/vue-fontawesome

2. 安装样式依赖

$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-free-brands

注意:

  • 免费版支持三种样式:solid、regular和brands,后面在使用图标时根据样式的不同也会有不同的前缀

  • 如果下载依赖失败,试试cnpm,不赘述了!

配置

进入main.js文件配置Font Awesome,配置方式比起4以前多了一些代码。

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'
 
fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20220220a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: