脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue fontawesome图标库

Vue项目中使用fontawesome图标库的方法

 更新时间：2023年12月27日 10:10:25   作者：淋雪小新  
fontawesome的图标有免费版和专业版,本文主要使用free版本,一般free版本的图标够用,free图标又划分为三个图标库,主要有实心图标solid、常规图标regular及品牌图标brand,根据需求去下载对应的图标库,无须全部下载,对vue fontawesome图标库相关知识感兴趣的朋友一起看看吧

Vue项目中使用fontawesome图标库的方法

官方文档https://fontawesome.com.cn/

Font Awesome

1. 使用npm安装核心包，它包含了让图标工作的所有实用工具

npm i --save @fortawesome/fontawesome-svg-core

2. 安装vue-fontawesome组件库，Vue2.x和Vue3.x稍微有所不同

# Vue2.x
npm i --save @fortawesome/vue-fontawesome@latest-2
# Vue3.x
npm i --save @fortawesome/vue-fontawesome@latest-3

3. 以上环境安装完成后，开始安装所需要的图标库

fontawesome的图标有免费版和专业版，本文主要使用的是free版本，一般free版本的图标足够用了，free图标又划分为三个图标库，主要有实心图标（solid）、常规图标（regular）以及品牌图标（brand），根据需求去下载对应的图标库，无须全部下载

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

4.Vue项目中导入整个样式

fontawesome的图标也是分为全部导入和按需导入，如果您在一种样式中使用大量图标，则可以导入整个样式 - 但不推荐，因为它可能是数千个图标。导入方法：在src/main.js或src/main.ts文件中导入fontawesome的内核、组件以及刚才所下载的图标库，

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import all icons, solid图标库的包名为fas、regular图标库的包名为far、brands图标库的包名为fab */
import { fas } from '@fortawesome/free-solid-svg-icons'
// import { far } from '@fortawesome/free-regular-svg-icons'
// import { fab } from '@fortawesome/free-brands-svg-icons'
/* add icons to the library */
library.add(fas)
/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)

现在，你可以在Vue项目的任何组件中使用fontawesome, fontawesome提供的是矢量图标，你可对图标样式进行改写, 下面的代码中我导入的是brands图标

<template>
  <div class="brand-icon">
    <a><font-awesome-icon icon="fa-brands fa-qq"/></a>
    <a><font-awesome-icon icon="fa-brands fa-weixin"/></a>
    <a><font-awesome-icon icon="fa-brands fa-github"/></a>
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
.brand-icon {
  display: flex;
  justify-content: center;
}
.brand-icon a {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #ceb4b4;
  background-color: #257979;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}
</style>

5.Vue组件中按需导入

如果你在项目中用到的图标较少，并且希望在打包的时候不占用资源，那么你可以按需导入，你应该所使用图标的组件中这样写

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faWeixin, faQq, faGithub } from '@fortawesome/free-brands-svg-icons'
library.add(faWeixin, faQq, faGithub)
export default {
  name: 'components',
  components: {
    FontAwesomeIcon
  }
}

导入对应的图标后，添加到library中，并注册组件即可使用导入的图标了, 使用方法一样

<div class="other-login">
  <a><font-awesome-icon icon="fa-brands fa-qq"/></a>
  <a><font-awesome-icon icon="fa-brands fa-weixin"/></a>
  <a><font-awesome-icon icon="fa-brands fa-github"/></a>
</div>

在这里插入图片描述

6.如何查询所需要的图标

进入官网后，点击导航栏的搜索图标，输入制定图标名称，注意搜索内容仅支持英文检索

在这里插入图片描述

在这里插入图片描述

补充：

如何在vue中使用Font Awesome库

要在Vue中使用FontAwesome组件库图标，你可以按照以下步骤进行操作：

1.安装FontAwesome库：在项目的根目录下通过npm或者yarn安装FontAwesome库。打开终端并执行以下命令：

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

2.在main.js文件中引入FontAwesome库并配置：

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'//同一个图标的其他系列
library.add(fas,far)
Vue.component('font-awesome-icon', FontAwesomeIcon)

3.加载图标，例如：

<font-awesome-icon icon="heart" />
<font-awesome-icon icon="clock" />
<font-awesome-icon icon="clock" style="color: #476151;" />

到此这篇关于Vue项目中使用fontawesome图标库的文章就介绍到这了,更多相关vue fontawesome图标库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Ant Design的可编辑Tree的实现操作

    Ant Design的可编辑Tree的实现操作

    这篇文章主要介绍了Ant Design的可编辑Tree的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue3源码分析调度器与watch用法原理

    Vue3源码分析调度器与watch用法原理

    这篇文章主要为大家介绍了Vue3源码分析调度器与watch用法原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • Vue.js前端框架之事件处理小结

    Vue.js前端框架之事件处理小结

    这篇文章主要介绍了Vue.js前端框架之事件处理小结,本文给大家介绍了v-on 指令的基本用法，通过实例讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • Vue使用NProgress实现页面顶部的进度条显示效果

    Vue使用NProgress实现页面顶部的进度条显示效果

    这篇文章主要介绍了vue Nprogress页面顶部进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条，本文通过实例代码给大家讲解，需要的朋友可以参考下
    2022-12-12
  • Vue3将虚拟节点渲染到网页初次渲染详解

    Vue3将虚拟节点渲染到网页初次渲染详解

    这篇文章主要为大家介绍了Vue3将虚拟节点渲染到网页初次渲染详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • Vue手写实现异步更新详解

    Vue手写实现异步更新详解

    这篇文章主要介绍了Vue手写实现异步更新详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助
    2022-08-08
  • Vue3如何根据搜索框内容跳转至本页面指定位置

    Vue3如何根据搜索框内容跳转至本页面指定位置

    在开发中我们经常遇到这样的需求,根据要求跳转至本页面指定位置,这篇文章主要给大家介绍了关于Vue3如何根据搜索框内容跳转至本页面指定位置的相关资料,需要的朋友可以参考下
    2022-11-11
  • 使用vue-cli+webpack搭建vue开发环境的方法

    使用vue-cli+webpack搭建vue开发环境的方法

    这篇文章主要介绍了使用vue-cli+webpack搭建vue开发环境的方法,需要的朋友可以参考下
    2017-12-12
  • 解决chunk-vendors.js语法错误问题

    解决chunk-vendors.js语法错误问题

    在遇到chunk-vendors.js文件的语法错误时,可以尝试在vue.config.js文件中添加transpileDependencies参数进行配置,这通过明确指示哪些依赖需要被babel转译,从而帮助解决编译过程中的语法问题,此方法适用于Vue项目中遇到的相关错误,希望能帮助到遇到同样问题的开发者
    2024-10-10
  • 使用provide/inject实现跨组件通信的方法

    使用provide/inject实现跨组件通信的方法

    在 Vue 应用中,组件间通信是构建复杂应用时的一个常见需求,Vue3.x 提供了provide和inject API,让跨组件通信变得更加简洁和高效,本文将深入探讨如何使用provide和inject在Vue3.x中实现跨组件通信,并通过示例代码一步步进行说明,需要的朋友可以参考下
    2024-03-03

最新评论