vue导入Font Awesome

本文介绍了如何在Vue项目中集成和使用Font Awesome图标库,包括安装基础和样式依赖,修改main.js文件,以及详细展示了各种图标用法,如大小、旋转、翻转、动画效果、边框、变形、遮罩、组合使用等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、安装基础依赖
首先在npm中执行以下命令安装基础依赖库
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/vue-fontawesome
二、安装样式依赖
然后安装免费的三种类型图标的样式依赖
npm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/free-regular-svg-iconsnpm i --save @fortawesome/free-brands-svg-icons
在这里插入图片描述
Light是需要收费的
三、修改main.js
import { library } from ‘@fortawesome/fontawesome-svg-core’
import { fas } from ‘@fortawesome/free-solid-svg-icons’
import { far } from ‘@fortawesome/free-regular-svg-icons’
import { fab } from ‘@fortawesome/free-brands-svg-icons’
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText} from ‘@fortawesome/vue-fontawesome’
library.add(fas, far, fab)
Vue.component(‘font-awesome-icon’, FontAwesomeIcon)
Vue.component(‘font-awesome-layers’, FontAwesomeLayers)
Vue.component(‘font-awesome-layers-text’,FontAwesomeLayersText)

在这里插入图片描述
使用时
solid样式,前缀为fas
在这里插入图片描述
regular样式,前缀为far
在这里插入图片描述
brands样式,前缀为fab
在这里插入图片描述
提供的所有图标可以进入官网的图标搜索进行查看
https://fontawesome.com/icons?d=gallery
基础用法:
一、显示图标
使用在main.js中注册的组件,font-awesome-icon标签用来显示图标,icon属性中可以设置样式前缀,以及图标名字。

在这里插入图片描述
在这里插入图片描述
如果是soild样式,前缀为fas,则‘fas’可以省略。比如以上代码可简写为:
在这里插入图片描述
二、设置图标大小
默认情况下图标和当前文字的大小一致。我们可以通过size属性在此基础上改变图标大小,该属性支持多种类型大小的设置方式
在这里插入图片描述
在这里插入图片描述
三、固定宽度图标
可以使用fixed-width固定图标宽度
在这里插入图片描述
在这里插入图片描述
四、旋转图标
可以使用rotation设置角度大小来旋转图标

在这里插入图片描述
五、翻转图标
可以使用flip设置相关值来翻转图标
在这里插入图片描述
在这里插入图片描述
六、旋转动画效果
1、添加spin属性可以让图标不停的顺时针旋转,每个角度都会转到
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
2、添加pulse属性同样可以让图标旋转,但并不是顺时针每个角度都会转到,而是0度,45度,90度这样跳跃的变化,所以动画旋转的会很快
在这里插入图片描述
在这里插入图片描述
七、图标居左、居右
有时候我们需要图标一直在最左侧或者最右侧,默认情况下,当图标文字共存时显示的效果如下:
在这里插入图片描述
在这里插入图片描述
当使用pull属性 pull="left"后
在这里插入图片描述

当加上pull="rigth"后
在这里插入图片描述
八、给图标加上边框(border)
在这里插入图片描述

在这里插入图片描述
九、变形、自由变换(transform)
1、比如将下列图标缩小6,并向左移动60
在这里插入图片描述
在这里插入图片描述
十、将下列第二个图标顺时针旋转42°
在这里插入图片描述
在这里插入图片描述
十一、遮罩(mask)
在这里插入图片描述
在这里插入图片描述
十二、多个图标组合使用(font-awesome-layars)
在这里插入图片描述
在这里插入图片描述
十三、图标与文字的组合使用
在这里插入图片描述
在这里插入图片描述
十四、动态改变图标(图标的绑定)

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值