Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。 [](Font Awesome) 今天在引用别的库的时候正好发现了一个图标字体的库于是点进去看看，发现居然支持vue引入，带着好奇心研究了一下，就是Font Awesome

具体使用步骤如下：

1.下载相应的依赖包：

npm i --save @fortawesome/fontawesome-svg-core
```
# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

```
# for Vue 2.x
npm i --save @fortawesome/vue-fontawesome@latest-2

# for Vue 3.x
npm i --save @fortawesome/vue-fontawesome@latest-3
```
```

2.引用

这些代码在main。js中引入

import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* add some free styles */
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
// import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
/* add each imported icon to the library */
library.add(faDiscord,faTwitter)
/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)