#mpvue #font-awesome

mpvue 如何使用 font-awesome? （不需要编码 base64）

写小程序遇到的问题

网上大多是：下载字体包-压缩.ttf 文件-> 编码 base64 -新建 wxss 复制修改替换 font-awesome 源码
太麻烦了
研究了一下午 解决方案如下

1.安装依赖

1
npm i font-awesome --save

2.main.js 里 添加

1
import "font-awesome/css/font-awesome.min.css";

3.此时 使用的话 报错

1
VM23297:2 Failed to load local font resource /static/fonts/fontawesome-webfont.woff2-do-not-use-local-path-./static/css/app.wxss&4&7
2
the server responded with a status of 404 (HTTP/1.1 404 Not Found)

这里写图片描述

4.解决方法 在 build 文件夹里 修改 webpack.base.conf.js 文件
如下：重点是去除 limit 限制

1
{
2
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
3
     loader: 'url-loader',
4
     options: {
5
       // limit: 10000,
6
       name: utils.assetsPath('fonts/[name].[ext]')
7
     }
8
9
}

这里写图片描述

5.然后重启项目

1
npm run dev
#mpvue #font-awesome