vue中引入font-awesome字符

安装基础依赖

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

安装样式依赖

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

修改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)

使用

font-awesome官网

  • solid 样式,前缀为:fas
  • regular 样式,前缀为:far
  • brands 样式,前缀为:fab
<font-awesome-icon :icon="['fas','power-off']" size="lg" />

如果是 solid 样式(前缀为:fas),则前缀可以省略。比如上面第一个图标等效下面写法:

<font-awesome-icon icon="power-off" size="lg" />

调整大小

使用size属性调整图标大小

<font-awesome-icon icon="power-off" size="xs" />
<font-awesome-icon icon="power-off" size="lg" />
<font-awesome-icon icon="power-off" size="2x" />

固定宽度

使用 fixed-width 可以固定图标宽度。

<font-awesome-icon icon="power-off" fixed-width />

参考网站:

  1. Vue.js - Font Awesome字体图标的使用详解

推荐阅读更多精彩内容