在Vue中使用Font Awesome

您所在的位置：网站首页 › duotone下载 › 在Vue中使用Font Awesome

在Vue中使用Font Awesome

2023-07-28 11:37| 来源: 网络整理| 查看: 265

在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的入口文件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

【本文地址】

在Vue中使用Font Awesome

在Vue中使用Font Awesome

今日新闻

推荐新闻