vue导入Font Awesome

一、安装基础依赖
首先在npm中执行以下命令安装基础依赖库
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/vue-fontawesome
二、安装样式依赖
然后安装免费的三种类型图标的样式依赖
npm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/free-regular-svg-iconsnpm i --save @fortawesome/free-brands-svg-icons

Light是需要收费的
三、修改main.js
import { library } from ‘@fortawesome/fontawesome-svg-core’
import { fas } from ‘@fortawesome/free-solid-svg-icons’
import { far } from ‘@fortawesome/free-regular-svg-icons’
import { fab } from ‘@fortawesome/free-brands-svg-icons’
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText} from ‘@fortawesome/vue-fontawesome’
library.add(fas, far, fab)
Vue.component(‘font-awesome-icon’, FontAwesomeIcon)
Vue.component(‘font-awesome-layers’, FontAwesomeLayers)
Vue.component(‘font-awesome-layers-text’,FontAwesomeLayersText)

使用时：
solid样式，前缀为fas

regular样式，前缀为far

brands样式，前缀为fab

提供的所有图标可以进入官网的图标搜索进行查看
https://fontawesome.com/icons?d=gallery
基础用法：
一、显示图标
使用在main.js中注册的组件，font-awesome-icon标签用来显示图标，icon属性中可以设置样式前缀，以及图标名字。

如果是soild样式，前缀为fas，则‘fas’可以省略。比如以上代码可简写为：

二、设置图标大小
默认情况下图标和当前文字的大小一致。我们可以通过size属性在此基础上改变图标大小，该属性支持多种类型大小的设置方式


三、固定宽度图标
可以使用fixed-width固定图标宽度


四、旋转图标
可以使用rotation设置角度大小来旋转图标


五、翻转图标
可以使用flip设置相关值来翻转图标


六、旋转动画效果
1、添加spin属性可以让图标不停的顺时针旋转，每个角度都会转到


2、添加pulse属性同样可以让图标旋转，但并不是顺时针每个角度都会转到，而是0度，45度，90度这样跳跃的变化，所以动画旋转的会很快


七、图标居左、居右
有时候我们需要图标一直在最左侧或者最右侧，默认情况下，当图标文字共存时显示的效果如下：


当使用pull属性 pull="left"后

当加上pull="rigth"后

八、给图标加上边框（border）

九、变形、*变换（transform）
1、比如将下列图标缩小6，并向左移动60


十、将下列第二个图标顺时针旋转42°


十一、遮罩（mask）


十二、多个图标组合使用（font-awesome-layars）


十三、图标与文字的组合使用


十四、动态改变图标（图标的绑定）