Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使用它(点击查看)。本文接着介绍,如何在 Vue 项目中使用 Font Awesome。
一、准备工作
1,安装基础依赖
进入 Vue 项目文件夹,执行如下命令安装基础依赖库。
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
2,安装样式依赖
Font Awosome 为我们提供了 Solid、Regular、Brands 这三种免费样式(日常使用完全足够),执行如下命令安装。
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
3,修改 src/main.js
添加如下代码引入并配置 Font Awesome,之后我们就可以使用它了。
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)
二、样式介绍
(1)上面提到 Font Awosome 为我们提供了三种免费的样式,使用时分别对应不同的前缀。
- solid 样式,前缀为:fas
- regular 样式,前缀为:far
- brands 样式,前缀为:fab
(2)它们提供的所有图标可以进入官方的图标搜索页进行查看:
三、基本用法
1,显示图标
(1)我们使用 font-awesome-icon 标签来显示图标,icon 属性中可以设置样式前缀、以及图标名字。
<font-awesome-icon :icon="['fas', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['fab', 'accessible-icon']" />
(2)如果是 solid 样式(前缀为:fas),则前缀可以省略。比如上面第一个图标等效下面写法:
<font-awesome-icon icon="square" />
2,设置图标大小
默认情况下图标和当前文字的大小是一样的。我们可以通过 size 属性在此基础上作调整,该属性支持多种类型的设置方式。
<font-awesome-icon icon="chess-knight" />
<font-awesome-icon icon="chess-knight" size="xs" />
<font-awesome-icon icon="chess-knight" size="lg" />
<font-awesome-icon icon="chess-knight" size="2x" />
3,固定宽度图标
使用 fixed-width 可以固定图标宽度。
<font-awesome-icon icon="home" fixed-width /> home <br>
<font-awesome-icon icon="child" fixed-width /> help <br>
<font-awesome-icon icon="cog" fixed-width /> settings <br>
4,旋转图标
<font-awesome-icon icon="chess-knight" rotation="0" />
<font-awesome-icon icon="chess-knight" rotation="90" />
<font-awesome-icon icon="chess-knight" rotation="180" />
<font-awesome-icon icon="chess-knight" rotation="270" />
5,翻转图标
<font-awesome-icon icon="chess-knight" />
<font-awesome-icon icon="chess-knight" flip="horizontal" />
<font-awesome-icon icon="chess-knight" flip="vertical" />
<font-awesome-icon icon="chess-knight" flip="both" />
6,旋转动画效果
(1)添加 spin 属性可以让图标不停地顺时针旋转。
<font-awesome-icon icnotallow="arrow-circle-down" spin />
(2)添加 pulse 属性同样可以让图标旋转,但它不像 spin 那样是均匀地变化角度,而是 0 度、45 度、90 度...这样跳跃地变化
<font-awesome-icon icnotallow="arrow-circle-down" pulse />
7,图标居左、居右
有时我们需要让图标一直在最左侧或最右侧(在做文字围绕图标效果时会用到)。默认情况下,当图标文字共存时的显示效果如下:
<font-awesome-icon icon="clipboard-list" size="2x"/>
welcome to hangge.com welcome to hangge.com
(1)加上 pull="left" 后的效果:
<font-awesome-icon icon="clipboard-list" size="2x" pull="left"/>
welcome to hangge.com welcome to hangge.com
(2)加上 pull="right" 后的效果:
<font-awesome-icon icon="clipboard-list" size="2x" pull="right"/>
welcome to hangge.com welcome to hangge.com
8,给图标加上边框(border)
<font-awesome-icon icon="clipboard-list" size="2x" pull="right" border />
welcome to hangge.com welcome to hangge.com
四、进阶用法
1,变形、自由变换(Transforms)
(1)比如下面样例将第二个图标缩小 6,并向左移动 4:
<font-awesome-icon icon="clipboard-list" />
<br>
<font-awesome-icon icon="clipboard-list" transform="shrink-6 left-4" />
(2)下面样例将第二个图标顺时针旋转 42 度:
<font-awesome-icon icon="clipboard-list" />
<br>
<font-awesome-icon icon="clipboard-list" :transform="{ rotate: 42 }" />
2,遮罩
<font-awesome-icon icon="star" />
<font-awesome-icon icon="star" mask="circle" />
<font-awesome-icon icon="star" mask="square" />
3,多个图标的组合使用
<font-awesome-layers class="fa-lg">
<font-awesome-icon icon="circle" style="color: green;"/>
<font-awesome-icon icon="check" transform="shrink-6" style="color: white;" />
</font-awesome-layers>
4,图标与文字的组合使用
<font-awesome-layers full-width class="fa-4x">
<font-awesome-icon icon="star"/>
<font-awesome-layers-text transform="down-1 right-1 shrink-14" value="hangge" style="color:white" />
</font-awesome-layers>
5,动态改变图标(图标的绑定)
<template>
<font-awesome-icon :icon="icon" />
</template>
<script>
export default {
computed: {
icon() {
return ['fas', 'coffee']
}
}
}
</script>
转自:https://www.hangge.com/blog/cache/detail_2104.html#
案例
https://fontawesome.com/docs/web/use-with/vue/
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/vue-fontawesome
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
/* Set up using Vue 3 */
import { createApp } from 'vue'
import App from './App.vue'
/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
/* add icons to the library */
library.add(faUserSecret)
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')
尺寸
字体真棒支持t恤大小规模的从 2xs 要 2xl 以及文字的大小从 1x 要 10x.
<!-- T-shirt sizes -->
<font-awesome-icon icon="fa-solid fa-coffee" size="xs" />
<font-awesome-icon icon="fa-solid fa-coffee" size="lg" />
<!-- X-factor sizing -->
<font-awesome-icon icon="fa-solid fa-coffee" size="6x" />
String格式
<template>
<div id="app">
<!-- Add the style and icon you want using the String format -->
<font-awesome-icon icon="fa-solid fa-user-secret" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
Arrays格式
<template>
<div id="app">
<!-- Add the style and icon you want using the Array format -->
<font-awesome-icon :icon="['fas', 'user-secret']" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>