Vue 使用 FontAwesome

Vue 中使用 FontAwesome

安装依赖

基础依赖

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

样式依赖

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

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

起步配置

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 } from '@fortawesome/vue-fontawesome'
library.add(fas,far,fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)

使用

请到官网去查找想要的图标，比如找一个主页的图标 home，想象一下一般都会用 home这个单词来表示

移步至 https://fontawesome.com/icons?d=gallery ，在免费里面搜索 home,然后复制名称

接下来使用html 标签的形式插入到想要出现图标的地方

使用默认样式

<font-awesome-icon icon="home" />

直接把 icon中的内容换成你复制的即可

使用带前缀的样式

比如我需要一个 关闭的按钮图标

<font-awesome-icon :icon="['fas','power-off']" />

• fas 代表你当初导入的 free-solid-svg-icons

• 参数2 为样式名称

改变样式

先到浏览器中确认一下是被转换成了哪种标签 ,应该是<svg>

svg path{
      fill:red;
}