vue中使用Font Awesome 5

在目前这个项目中使用的是阿里的icon,但是由于对商业项目并不免费,所以毫不犹豫的放弃它选择font awesome。

安装依赖

// 基础依赖
npm i --save @fortawesome/fontawesome

npm i --save @fortawesome/vue-fontawesome

// 样式
npm i --save @fortawesome/fontawesome-free-solid

npm i --save @fortawesome/fontawesome-free-regular

npm i --save @fortawesome/fontawesome-free-brands
  • 上面三种样式是免费的,根据样式的不同,后缀也会不同。
  • 如果npm失败了就试试cnpm

配置,在main.js中加入如下代码:

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)

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

素材地址:https://fontawesome.com/icons..,过滤掉收费图标:

搜索之后点击图标进行,可以看到图标的样式代码、svg下载地址等:

<i class="far fa-user"></i>

对应的在vue中的代码:

<font-awesome-icon :icon="['far','user']"/>

完结,一定要记得区分免费和收费哈。

Last modification:April 22nd, 2018 at 11:21 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment