Vue.js 使用 FontAwesome

这里以使用微信和支付宝的 Icon 为例。

步骤

安装包
其中 fontawesome-svg-core 为核心包，free-solid-svg-icons 为默认的 fas 资源包，free-brands-svg-icons 为品牌图标的 fab 资源包。
另外这里使用的 vue 2.x ，需要安装 vue-fontawesome@latest 包。
bash
```
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest
```
1
2
3
4

在 main.js 中导入组件和图标

javascript

import { library } from '@fortawesome/fontawesome-svg-core'
import { faWeixin, faAlipay } from '@fortawesome/free-brands-svg-icons'
import { faRetweet, faArrowCircleDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faWeixin, faAlipay)
library.add(faRetweet, faArrowCircleDown)

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

在页面展示图片

xml

<font-awesome-icon :icon="['fab', 'weixin']" style="color: #03dd6c;" />
<font-awesome-icon :icon="['fab', 'alipay']" style="color: #1977ff;" />

其它包

除了上面用到的包之外，还有如下这些，其中 pro 开头的几个包是要付费使用的。
安装方式和上面的类似。

package name	prefix
free-solid-svg-icons	fas
free-regular-svg-icons	far
free-brands-svg-icons	fab
pro-solid-svg-icons	fas
pro-regular-svg-icons	far
pro-light-svg-icons	fal
pro-duotone-svg-icons	fad

Vue.js 使用 FontAwesome ​

步骤 ​

其它包 ​

链接 ​

Vue.js 使用 FontAwesome

步骤

其它包

链接