应用场景:
- 在网站个性化对字体设置
- 网站需要多样式图标
例子:
下面将在creat-react-app应用中引用fontawesome库,使用其图标。
本文内容
- 下载fontawesome库
- webpack配置
- 使用fontawesome库
- 参考网站
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