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官网查找所需的图标。
  • 在组件中使用:

4.参考网站

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

你可能感兴趣的:(creat-react-app添加第三方字体)