手机网站 开发者模式网站建设柒金手指花总12

element-plus框架的图标icon种类较少，一般无法涵盖所有业务情况

这时候引入font awesome6免费版，图标库非常丰富，一般可以满足所有业务场景

官网：https://fa6.dashgame.com/Font Awesome 6，一套始终绝佳的图标字体库和CSS框架。Font Awesome6中文网。https://fa6.dashgame.com/

 官网上有vue3的引入教程

这里复制主要部分

npm安装

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
# for Vue 3.x
npm i --save @fortawesome/vue-fontawesome@latest-3

main.js引用

/* import the fontawesome core */
import {library} from '@fortawesome/fontawesome-svg-core'/* import font awesome icon component */
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {faChartLine,faChartColumn,faChartPie,faList,
} from '@fortawesome/free-solid-svg-icons'
library.add(faChartLine, faChartColumn, faChartPie, faList)/* 注册 font awesome icon 全局组件 */
app.component('font-awesome-icon', FontAwesomeIcon)

页面使用图标

可以使用font-size等css属性控制样式

<div><font-awesome-icon icon="fa-solid fa-chart-pie"><font-awesome-icon icon="fa-solid fa-chart-line">
</div>