【Vue.js】使用FontAwesome

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

## 步骤

1.  安装包

其中 *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
    ```

2.  在 *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)
    ```

3.  在页面展示图片

```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*  |

## 链接

1. [@fortawesome_vue-fontawesome - npm][1]
1. [GitHub - FortAwesome_vue-fontawesome_ Font Awesome 5 Vue component][2]

[1]:https://www.npmjs.com/package/@fortawesome/vue-fontawesome (@fortawesome_vue-fontawesome - npm)
[2]:https://github.com/FortAwesome/vue-fontawesome (GitHub - FortAwesome_vue-fontawesome_ Font Awesome 5 Vue component)

【Vue.js】使用FontAwesome

目录

关联

热门

最新