font-awesome使用方法

  1. 在官网下载
    font-awesome官网.png
  2. 在html文件头引入
    .min.css为压缩后文件
    .css为未压缩文件
    引入任意文件均可


    引入文件.png
引入font-awesome.png

导出font.png

文件目录.png
  1. 配置webpack
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }

使其能正常解析字体


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

引入文件.png
  1. 配置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'
                        }
                    }
                ]
            }
        ]
    }
  1. 在需要字体的地方引入font-awesome即可
import './sass/font-awesome.min.css';

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

你可能感兴趣的:(font-awesome使用方法)