Icon使用-fortawesome图标库

最新推荐文章于 2025-11-20 10:11:46 发布

原创最新推荐文章于 2025-11-20 10:11:46 发布 · 951 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

HTML 同时被 2 个专栏收录

15 篇文章

订阅专栏

前端

15 篇文章

订阅专栏

本文详细介绍如何在项目中集成Font Awesome图标库，包括通过npm安装、配置main.js以及在Vue项目中使用Font Awesome图标的具体步骤。

fortawesome官网：https://fontawesome.dashgame.com/
npm

npm i font-awesome -S
npm i @fortawesome/fontawesome-svg-core -S
npm i @fortawesome/free-solid-svg-icons -S
npm i @fortawesome/vue-fontawesome -S

main.js 配置

import { library } from '@fortawesome/fontawesome-svg-core' // 引入awesome字体图标
import { faUserSecret } from '@fortawesome/free-solid-svg-icons' // 引入awesome字体图标
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // 引入awesome字体图标
import 'font-awesome/css/font-awesome.css' // 引入图标字体

// 引入组建初始化
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon)