完成门户网站建设,上海网站建设的软件,宿迁做网站电话,网站优化推广怎么做element-plus框架的图标icon种类较少#xff0c;一般无法涵盖所有业务情况
这时候引入font awesome6免费版#xff0c;图标库非常丰富#xff0c;一般可以满足所有业务场景
官网#xff1a;https://fa6.dashgame.com/Font Awesome 6#xff0c;一套始终绝佳的图标字体库…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-fontawesomelatest-3main.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属性控制样式
divfont-awesome-icon iconfa-solid fa-chart-piefont-awesome-icon iconfa-solid fa-chart-line
/div
