【vue3】引入fontawesome图标Icon

泠青沼~

已于 2023-02-08 17:19:37 修改

阅读量921

点赞数

分类专栏：解决问题方案文章标签： vue.js 前端 javascript css html5

于 2023-02-08 15:57:30 首次发布

本文链接：https://blog.csdn.net/m0_46635265/article/details/128936826

版权

解决问题方案专栏收录该内容

6 篇文章

订阅专栏

🎈博客主页：🌈我的主页🌈
🎈欢迎点赞 👍 收藏 🌟留言 📝 欢迎讨论！👏
🎈本文由【泠青沼~】原创，首发于 CSDN🚩🚩🚩
🎈由于博主是在学小白一枚，难免会有错误，有任何问题欢迎评论区留言指出，感激不尽！🌠个人主页

🌟一、添加SVG核心

进入Terminal：

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

🌟二、添加图标包

可以选用免费的图标包来使用
在这里插入图片描述

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

🌟三、添加Vue组件

npm i --save @fortawesome/vue-fontawesome@latest-3

🌟四、使用 Vue 设置

🌟🌟 4.1、设置库

/* 使用Vue 3设置 */
import { createApp } from 'vue'
import App from './App.vue'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { faUserSecret,faHouseChimneyWindow,faWallet,faCircleDollarToSlot,faLayerGroup } from '@fortawesome/free-solid-svg-icons'
import { faUser,faIdBadge,faPenToSquare} from '@fortawesome/free-regular-svg-icons'

/* add icons to the library */
library.add(faLayerGroup,faUserSecret,faUser,faIdBadge,faWallet,faPenToSquare,faHouseChimneyWindow,faCircleDollarToSlot,)


createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

🌟🌟 4.2、调用图标

//icon绑定变量，最后转换为字符串
<font-awesome-icon class="icon" :icon="item.meta.iconcls+''" />
 <span>{{item.name}}</span>

<style>
.icon{
  color: #90d7ec;
  margin-right: 5px;
}

</style>