时间戳

首页 > 解决方案 > 带有反应的字体真棒 5.13.0

css - 带有反应的字体真棒 5.13.0

问题描述

我正在尝试在 react.js 应用程序中使用 Font-Awesome 5.13.0，有没有办法使用这样的图标：

<i className="fas fa-tachometer-alt fa-fw "></i>

而不是使用“官方反应方式”，例如：

import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

<FontAwesomeIcon icon={faHome} />

提前致谢。

标签： cssreactjsfont-awesome

解决方案

您可以从 CDN 中热链接 css，例如https://www.bootstrapcdn.com/fontawesome/（记得配置 CSP）

另一种选择是从节点模块导入 Font Awesome css

import '../node_modules/@fortawesome/fontawesome-free/css/all.css';

您需要将构建工具配置为加载 sass/css 文件，例如 webpack

{
    test: /\.(sass|scss|css)$/,
    use: ['style-loader','css-loader','sass-loader']
},

您需要将构建工具配置为加载字体文件，例如 webpack

{
    test: /\.(svg|eot|woff|woff2|ttf)$/,
    use: ['file-loader']
}

推荐阅读