vue中使用font-awesome的方式vue-fontawesome

最新推荐文章于 2025-07-15 16:23:35 发布

原创最新推荐文章于 2025-07-15 16:23:35 发布 · 5.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#foneawesome #vue #vue-fontawesome #node #nodejs

本文介绍了如何在Vue项目中使用font-awesome图标库，通过vue-fontawesome实现集成。首先，文章提供了一个git项目的链接作为参考，然后以`vue init webpack`创建的项目为例，详细阐述了在`main.js`中引入以及在Vue模板中添加组件的步骤。文章提到了vue-fontawesome的三种使用方式，并特别解析了第二种方式，涉及到font-awesome的图标前缀，还给出了官方图标查询网站的地址。

最近用vue构建项目，想用font-awesome无意间看到了一个项目

git的项目地址

对于对font-awesome还不太熟悉的人来说，我提供个下面的教程

我以用vue init webpack xx 生成的项目为例，

1.第一步

打开main.js

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import fontawesome from '@fortawesome/fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
//想要使用什么的种类需要自己安装
import solid from '@fortawesome/fontawesome-free-solid'

//装载到fontawesome中
fontawesome.library.add(brands, solid)

2.第二步

在需要引入的 vue模板中添加

import {FontAwesomeIcon, FontAwesomeLayers} from '@fortawesome/vue-fontawesome'

它自身有好几种使用的方式，这边演示三种基本的方式，首先在script表中添加如下的代码

import {FontAwesomeIcon, FontAwesomeLayers} from '@fortawesome/vue-fontawesome'
import faCoffee from '@fortawesome/fontawesome-free-solid/faCoffee'

export default {
  name: '1',
  components: {
    FontAwesomeIcon,
    FontAwesomeLayers,
  },
  computed: {
    icon() {
      return faCoffee
    }
  },

然后再template中添加如下的代码

<font-awesome-icon :icon="icon"/>
 <font-awesome-icon :icon="['fab', 'font-awesome']"/>
  <font-awesome-icon icon="spinner"/>

页面就会出现你想要的东西

这三种方式，

我想解释下第二种，因为fontawesome的种类问题，这种方式就是采用前缀

Note:这是fontawesome的icon的查询网站地址