Icon使用-fortawesome图标库

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
1
2
3
4

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)
1
2
3
4
5
6
7
8

标签使用

<i class='fa fa-address-book'></i>
1