應用場景：
- 在網(wǎng)站個性化對字體設置
- 網(wǎng)站需要多樣式圖標
例子：
下面將在creat-react-app應用中引用fontawesome庫挺身，使用其圖標否副。
本文內(nèi)容
- 下載fontawesome庫
- webpack配置
- 使用fontawesome庫
- 參考網(wǎng)站
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官網(wǎng)查找所需的圖標。 - 在組件中使用：
<div><i className="fas fa-camera-retro"></i></div>
4.參考網(wǎng)站
webpack設置：https://github.com/webpack-contrib/css-loader/issues/38
