Vue

在 Vue.js 项目中使用 Font Awesome

Font Awesome 是一个开源的图标库,提供了大量的免费图标供我们使用,今天来介绍一下在 Vue.js 项目中该如何使用它。

在开发页面时最经典的做法就是引入 Font Awesome 的 CSS 文件,然后在使用图标时,以i标签结合类名的方式使用,例如<i class="fas fa-user"></i>。但在 Vue 项目中,我们最好是以组件的方式使用,以符合组件化的思想。

首先安装基础依赖包:

npm install @fortawesome/fontawesome --save-dev
npm install @fortawesome/vue-fontawesome --save-dev

再根据需要安装相应的图标库:

npm install @fortawesome/fontawesome-free-solid --save-dev

在 Vue 项目的入口文件中引入这些依赖包并注册组件:

import Vue from 'vue';

//...

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

fontawesome.library.add(solid);
Vue.component('font-awesome-icon', FontAwesomeIcon);

//...

然后就可以在组件中使用图标了,例如:

<font-awesome-icon :icon="['fas', 'arrow-left']"></font-awesome-icon>

由于已经在入口文件中注册了全局组件 font-awesome-icon,因此我们直接以标签的形式使用就可以,其中 fas 为前缀,arrow-left 为图标名称。

参考资料
https://www.npmjs.com/package/@fortawesome/vue-fontawesome