在Vue中使用Font Awesome

Bertha 。 2022-03-27 11:58 1023阅读 1赞

### 在Vue中使用Font Awesome ###

*  Font Awesome介绍
 *  安装
 *  配置
 *  在Vue组件中使用图标
 *  使用商标图标
 *  源代码

# 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 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官网][Font Awesome 1]找一下我们需要的图标。

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

点进去后我们可以看到如下内容：  
![用户图标][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 1]  
注意划横线的内容，我们可以知道这个图标属于`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-`保留剩下的，作为数组的两个元素，就可以正确指定我们要的图标了。

实际效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 2]

实际上这是一个`<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>

实际效果：  
![调色效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 3]

# 使用商标图标 #

有时我们需要使用商标图标，方法跟上一节的用户图标一模一样，我们尝试使用微信的图标。先搜索`weixin`找到这个图标，然后点进去看样式：  
![微信图标][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 4]  
这次变成`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>

实际效果：  
![最终效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 5]

# 源代码 #

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

[Font Awesome]: https://fontawesome.com/
[Vue CLI 3]: https://blog.csdn.net/zyj362633491/article/details/85875218
[Font Awesome 1]: https://fontawesome.com/icons?d=gallery
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70]: /images/20220327/444e6b5fb7034292b5fe26399afb63fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 1]: /images/20220327/4fabd1866d4b4cc29292d726ebb76151.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 2]: /images/20220327/691c270506ac4ecebc23c96c32a09849.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 3]: /images/20220327/7cbe602c509445818ee8f40f1ece3a83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 4]: /images/20220327/efd0039c5e3f4df8b29c0488f9878bc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ajM2MjYzMzQ5MQ_size_16_color_FFFFFF_t_70 5]: /images/20220327/08a5ea8773e64cc9aa44700a514344a0.png
[Link 1]: https://github.com/DaKoala-Blog/Vue-FontAwesome-example