Font Awesome介绍

Font Awesome是一套流行的图标字体库，我们在实际开发的过程中会经常遇到需要使用图标的场景，对于一些常用的图标，不用设计师，我们可以直接在Font Awesome中找到并且使用。个人感觉Font Awesome的图标还是很齐全的，绝大多数的图标它都包含了，而且支持各种框架，这篇文章就着重介绍一下如何在Vue项目中使用Font Awesome。

安装

在Font Awesome 4版本中，可以通过使用npm安装font-awesome依赖以后直接在main.js中引入全部CSS文件来像使用原生JavaScript开发一样使用Font Awesome，但到了Font Awesome 5版本后，官方推出了对Vue的支持，我们可以根据自己的需求引入图标，这样到了最后打包的时候生产环境的文件只会包含我们所需要的图标文件，大大减小了依赖的体积，优化了应用的性能，本文讲解如何在Vue中使用Font Awesome 5版本。

一般来说需要安装三个依赖，也是官方推荐的安装内容：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons

其中第一行的依赖是Font Awesome的核心部分，第二行的依赖是Font Awesome在Vue环境中使用需要的Vue组件，第三行的依赖是Font Awesome的solid风格图标。

Font Awesome 5中官方将图标分为了几个风格，有solid，regular，light和brands。作为免费用户，只能使用部分solid，regular和brands的图标，我们目前只安装了solid图标，它已经包含了绝大多数我们要用到的图标，有时我们还需要使用到一些商标图标，让我们再来安装商标图标依赖。

npm install --save @fortawesome/free-brands-svg-icons

配置

我已经用Vue CLI初始化了一个空白的Vue项目，你也可以用你自己的方式来新建一个Vue项目，如果你也想用Vue CLI但是还不熟悉它的话，可以参考我的另外一篇文章Vue CLI 3 快速搭建项目。

在Vue的入口文件main.js中添加如下内容：

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import App from './App.vue';

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

Vue.config.productionTip = false;

new Vue({
    render: function (h) {
        return h(App);
    },
}).$mount('#app');

我们已经引入了Font Awesome的主要内容，并注册了Font Awesome组件，但是我们还没有引入任何一个图标，让我们先去Font Awesome官网找一下我们需要的图标。

在搜索框内用英文输入我们想搜索的内容，我们搜个比较常用的用户图标，输入user，点击第一排第四个图标。

点进去后我们可以看到如下内容：

注意划横线的内容，我们可以知道这个图标属于solid风格，同时关注一下这个class属性的内容，现在我们就可以去引入这个图标了，添加一些内容到main.js文件后它变成如下状态：

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { 
    faUser,
} from '@fortawesome/free-solid-svg-icons';
import App from './App.vue';

library.add(
    faUser,
);

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

Vue.config.productionTip = false;

new Vue({
    render: function (h) {
        return h(App);
    },
}).$mount('#app');

刚才图标的class中的fas代表solid风格，fa-user是这个图标的名称，所以我们在第四行引入它：

import { 
    faUser,
} from '@fortawesome/free-solid-svg-icons';

引入完毕后还要在核心依赖中加入这个引入的图标：

library.add(
    faUser,
);

我这里用换行的写法方便以后引入更多的图标时代码清晰，不换行也完全没有问题，至此配置已经完毕，我们可以在Vue组件中使用它了。

在Vue组件中使用图标

由于已经全局注册了组件，所以不管在那个Vue组件中我们都可以使用，为了方便我就直接在App.vue中使用了，在模板部分添加如下内容：

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

其中font-awesome-icon是我们刚刚注册好的组件名，:icon属性是一个数组，用来指定具体图标，刚刚的class中有两个属性，分别是fas和fa-user，第一个fas保留，第二个fa-user去掉开头的fa-保留剩下的，作为数组的两个元素，就可以正确指定我们要的图标了。

实际效果：

实际上这是一个<svg>标签，我们可以把它包裹在其他HTML标签中，给这个图标设置大小和颜色，例如：

<template>
    <div id="app">
        <span class="my-icon">
            <font-awesome-icon :icon="['fas', 'user']"></font-awesome-icon>
        </span>
    </div>
</template>

<script>
    export default {
        name: 'app',
    };
</script>

<style>
    .my-icon {
        color: red;
        background-color: blue;
        font-size: 32px;
    }
</style>

实际效果：

使用商标图标

有时我们需要使用商标图标，方法跟上一节的用户图标一模一样，我们尝试使用微信的图标。先搜索weixin找到这个图标，然后点进去看样式：

这次变成fab了，说明是属于brand风格，在main.js中的相关部分做如下变动，其余部分保持不变，这里不重复了：

import {
    faUser,
} from '@fortawesome/free-solid-svg-icons';
import {
    faWeixin,
} from '@fortawesome/free-brands-svg-icons';

library.add(
    faUser,
    faWeixin,
);

在App.vue中引入组件，根据上面的规则，:icon应该被设置为['fab', 'weixin']，我们继续保留上一节内容的代码，最终代码如下：

<template>
    <div id="app">
        <span class="my-icon">
            <font-awesome-icon :icon="['fas', 'user']"></font-awesome-icon>
        </span>
        <font-awesome-icon :icon="['fab', 'weixin']"></font-awesome-icon>
    </div>
</template>

<script>
    export default {
        name: 'app',
    };
</script>

<style>
    .my-icon {
        color: red;
        background-color: blue;
        font-size: 32px;
    }
</style>

实际效果：

源代码

示例中的源代码我已经放到GitHub，点击这里查看或者下载。