Analysis of font-awesome font packaging use cases (with code)

This time I will bring you an analysis of font-awesome font packaging usage cases (with code). What are the precautions for font-awesome font packaging. The following is a practical case, let's take a look.

1. First install the dependencies:

npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

2. Introduce font-awesome in the entry file

require('font-awesome-webpack');

3. Set webpack.config.js to process font files

There are two ways here, if you don’t want to generate font files separately, but want to combine font files with css files To build it into a file, you can use url-loader and set it as follows:

  module: {
      rules: [
        // 省略其他配置...
        // font-awesome
        {
          test: /\.(eot|svg|ttf|woff|woff2)\w*/,
          loader: 'url-loader?limit=1000000'
        },
        // 省略其他配置...
      ]
  }

Here a parameter limit is passed to url-loader and set to a larger value. This number can be customized, but it must be greater than The size of the maximum font file, because this parameter tells the url-loader that if the file is smaller than this parameter, it will be built directly into the file in the form of Data Url. This method is the most convenient, but the disadvantage is that the built files are very large, and there is no way to use CDN to cache the files when online. It is not recommended to deploy online.

The second method is to specify the output directory of the file of url-loader or file-loader when building, so that when deploying, font-awesome will rely on the font file in the directory specified when building, and There will no longer be the problem of not finding the font file. At this time, the webpack build configuration is as follows:

  module: {
  rules: [
    // 省略其他配置...
    // font-awesome
    {
      test: /\.(eot|svg|ttf|woff|woff2)\w*/,
      loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
    },
    // 省略其他配置...
  ]
}

After the project built with the above configuration, font-awesome will go to "/static/res/font/ "Look for the specified font file in the directory, and at the same time, the corresponding font folder will be generated in the project you build. You only need to copy the font file in this font folder to the "/static/res/font" directory. (If publicPath is "./", it means that you directly rely on the font file in the build directory, and there is no need to copy it), so that when you access your page, you can correctly request the font file.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue interceptor compatibility processing

How to print log information in console

jQuery implements mouse binding event image magnification function

The above is the detailed content of Analysis of font-awesome font packaging use cases (with code). For more information, please follow other related articles on the PHP Chinese website!