# fontawesome

官网: https://fontawesome.com/ (opens new window)

# 安装


  # 安装svg core
  npm i --save @fortawesome/fontawesome-svg-core
  # 安装图标库
  npm i --save @fortawesome/free-solid-svg-icons
  # 安装基于Vue 3的包装
  npm i --save @fortawesome/vue-fontawesome@latest-3

1
2
3
4
5
6
7

# 使用

首先在main.js中引入相关依赖

  // 引入 fontawesome core
  import { library } from '@fortawesome/fontawesome-svg-core'
  // 引入图标(图标名称)
  import { fas } from '@fortawesome/free-solid-svg-icons'
  // 引入组件
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

  // 然后将导入的图标添加到library中
  library.add(fas)

  // 最后将FontAwesomeIcon注册为全局组件
  createApp(App)
    .component('font-awesome-icon', FontAwesomeIcon)
    .mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后只需要在模版中直接使用组件即可

  <font-awesome-icon :icon="['fas', 'user-secret']" spin/>

# 动画

FontAwesome 内嵌很多动画，参考官网 (opens new window)