creat-react-app添加第三方字体

应用场景：

1. 在网站个性化对字体设置
2. 网站需要多样式图标

例子：
下面将在creat-react-app应用中引用fontawesome库，使用其图标。

本文内容

1. 下载fontawesome库
2. webpack配置
3. 使用fontawesome库
4. 参考网站

1. 下载fontawesome库

下载fontawesome库，将其中的web-fonts-with-css文件更改名为fontawesome，并将其保存create-react-app中的src目录中。详细文档。

2. webpack配置

引入 Icon,它有woff，eot文件，要使用url-loader设置加载。在webpack.config.dev.js文件中配置如下所示：

{
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.(png|woff|woff2|eot|ttf|svg)$/],
            loader: require.resolve('url-loader'),
            options: {
              limit: 10000,
              name: 'static/media/[name].[hash:8].[ext]',
            },
},

3.使用fontawesome库

• 在src/index.js文件引入fontawesome库（应用于全局）。

import './fontawesome/css/fontawesome-all.min.css';

• 查找图标
  去fontawesome官网查找所需的图标。
• 在组件中使用：

<div><i className="fas fa-camera-retro"></i></div>

4.参考网站

webpack设置：https://github.com/webpack-contrib/css-loader/issues/38