介绍
vue-fontawesome 是一个基于 FontAwesome 字体图标库的 Vue.js 组件。
FontAwesome 是一个免费的开源字体图标集，拥有超过 5,000 种图标，可以用于网站、应用程序等多种场景。而 vue-fontawesome 利用了 Vue.js 的组件化特性，使得我们可以更方便地在 Vue 项目中使用 FontAwesome 图标。
安装
首先需要在项目中安装 FontAwesome 的字体和 CSS：
npm install --save @fortawesome/fontawesome-free
然后再安装 vue-fontawesome：
npm install --save @fortawesome/vue-fontawesome
使用
在我们需要使用 FontAwesome 图标的组件中加入 vue-fontawesome：
-- -------------------- ---- -------
----------
-----
------------------ ------------- --
------
-----------
--------
------ - --------------- - ---- ------------------------------
------ - -------- - ---- -----------------------------------
------ ------- -
----------- -
---------------
-
-
---------在上述代码中，我们首先引入了 vue-fontawesome 和 FontAwesomeIcon 组件，然后在 components 中注册了 FontAwesomeIcon 组件。接着在模板中，我们使用了 <font-awesome-icon> 自定义标签来引用了 coffee 图标，这里的 icon 属性值是图标的名称，faCoffee 是我们在引入 FontAwesome 时所引入的 coffee 图标对象。
同时，我们也可以自定义 FontAwesomeIcon 的各种属性：
-- -------------------- ---- ------- ------------------ ------------- ------------ ---------- -------------- ------------------ -------------- ------------ ------------- ---------------- ------------------- --
属性列表
icon：图标名称mask：在图标上加遮罩symbol：将另一种图标作为当前图标的替换（实验功能）flip：可选值有horizontal（水平翻转）和vertical（垂直翻转）rotation：可选值有90、180、270，表示旋转的角度pull：可选值有left、right，设置图标的对齐方式size：可选值有xs、sm、lg、2x、3x、4x、5x，表示图标的大小border：若为true，表示用边框包围图标spin：若为true，表示图标旋转起来pulse：若为true，表示图标呼吸起来
需要注意的是，以上属性都可以使用 Vue.js 的计算属性等技术来设置值，例如：
-- -------------------- ---- ------- ------------------ -------------- -------- ---------------- - -------------- - ------------- --------- --------- ---- - ---- -- ----------------- ------------------ --------------- -------------- --
按需引入
如果只需要使用其中的一些图标，也可进行按需引入，例如：
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// 只引入 coffee 图标
library.add(faCoffee)
Vue.component('font-awesome-icon', FontAwesomeIcon)然后就可以在模板中使用了：
<template>
<div>
<font-awesome-icon icon="coffee" />
</div>
</template>引用不同的图标库
当然，FontAwesome 不仅仅只有一个图标库，如果需要使用其他的图标库，也需要先安装相应的库，例如：
npm install --save @fortawesome/free-brands-svg-icons
其中 free-brands-svg-icons 是一个提供了不同品牌的图标库。我们可以引入它所提供的一些图标：
import { faGithub, faFacebook } from '@fortawesome/free-brands-svg-icons'
library.add(faGithub, faFacebook)然后再像之前一样在模板中使用即可：
<template>
<div>
<font-awesome-icon icon="facebook" />
<font-awesome-icon icon="github" />
</div>
</template>自定义图标
如果需要自定义 FontAwesome 的图标，也可以通过 studio 发布自己的图标并将其引入到项目中。另外也可以参考 FontAwesome 的官方文档进行图标创建。
总结
以上就是 vue-fontawesome 的基本使用方法，通过引入 FontAwesome 的字体和 CSS，以及 vue-fontawesome 组件，我们可以非常方便地在 Vue 项目中使用各种 FontAwesome 图标，做出漂亮的 UI 效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517d81e8991b448cecf1