Vue 4.0——整合font-awesome解决方案

基本概念

font-awesome：提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

官网：https://fontawesome.com/

非官方中文网：http://www.fontawesome.com.cn/

解决方案

方法一：npm安装

1、安装

npm install font-awesome --save

2、引入

import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import $ from 'jquery'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'font-awesome/css/font-awesome.min.css';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

方法二：下载

1、下载

在官网下载代码到本地，现在应该是font-awesome-4.7

2、拷贝

把font-awesome整个文件夹放到static文件夹中

3、修改HTML

在index.html中加上

<link rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css">

参考文章

https://segmentfault.com/q/1010000009795785/a-1020000009796355

https://www.cnblogs.com/CyLee/p/9391344.html

https://blog.csdn.net/qq_34258593/article/details/81316153