Laravel 5.4 使用 font-awesome

〇、资源的打包过程

在开始引入 font-awesome 前，我们先了解一下 Laravel 的资源打包过程。

Laravel 使用 laravel-mix 调用 webpack 对资源打包。Mix 基于 webpack 的配置，所以运行定义于 package.json 文件中的 NPM 脚本，执行 Mix 的编译任务。

例如，npm run dev 根据 package.json 定义，实际执行以下脚本：

"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

webpack会自动执行位于 webpack.mix.js中的编译任务：

//webpack.mix.js
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

所以，我们引入 font-awesome，只需修改 app.scss 即可。

一、安装 font-awesome

npm install --save font-awesome

项目安装在 node_modules/font-awesome

二、修改 app.scss

在 app.scss 中，加入以下内容：

@import "node_modules/font-awesome/scss/font-awesome"

三、编译资源

npm run dev

四、疑难解答

如果 web server 使用 apache，且 document root 位于项目的 public 目录中，那么使用 OK。

如果项目目录是 document rooot 的子目录，font-awesome 则不能正常使用。
原因如下：
webpack 使用 node_modules/laravel-mix/setup/webpack.config.js 作为配置文件。对于 font-awesome 的字体文件，处理 rule 如下：

        {                                                                                                                                                    
            test: /\.(woff2?|ttf|eot|svg|otf)$/,                                                                                                             
            loader: 'file-loader',                                                                                                                           
            options: {                                                                                                                                       
                name: 'fonts/[name].[ext]?[hash]',                                                                                                 
                publicPath: Mix.resourceRoot                                                                                                                 
            }                                                                                                                                                
        },

因此生成的 css 文件，font 的路径如下：

@font-face {
  font-family: 'FontAwesome';
  src: url(/fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713);
  src: url(/fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713) format("embedded-opentype"), url(/fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e) format("woff2"), url(/fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad) format("woff"), url(/fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9) format("truetype"), url(/fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde) format("svg");
  font-weight: normal;
  font-style: normal;
}

在 /fonts 下自然是不能找到字体。

因此，解决方法有两个：

设置 document root 至 public目录，或使用虚拟主机实现
修改 node_modules/laravel-mix/setup/webpack.config.js 中 font 的路径。如 fonts -> project/public/fonts。