font-awesome使用方法

1. 在官网下载
   
   font-awesome官网.png

2. 在html文件头引入
   .min.css为压缩后文件
   .css为未压缩文件
   引入任意文件均可

   
   
   引入文件.png

引入font-awesome.png

导出font.png

文件目录.png

3. 配置webpack

            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }

使其能正常解析字体

更新
上面的方法在开发环境中好使，但是在标签中引入无法被webpack打包，因而这里我们采用第二种方法

引入文件.png

2. 配置webpack

    module: {
        rules: [
            ......
            {
                test: /\.(ttf|eot|svg|png)$/, use: 'file-loader', //加载文件 
            },
            {
                test: /\.woff(2)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            mimetype: 'application/font-woff'
                        }
                    }
                ]
            }
        ]
    }

3. 在需要字体的地方引入font-awesome即可

import './sass/font-awesome.min.css';

此时字体会被打包到webpack中，页面阿惠正常显示啦