时间戳

首页 > 解决方案 > 在 style.scss 中导入 fontawesome 时反应 unicode 图标不显示

reactjs - 在 style.scss 中导入 fontawesome 时反应 unicode 图标不显示

问题描述

在这里，我有一个使用 HTML 的工作代码笔，其中显示了图标（加号）。在 HTML 标头中有 fontawesome 直接导入。 https://codepen.io/jartysharky/pen/YzQvzrv

不，我想在没有 HMTL 的情况下使用这些图标。在我的 App.js 中，我有以下内容可以导入我的样式并链接到组件：

import './assets/scss/style.scss';

    const App = () => {
        return (
            <Router>
                <PageScrollTop>
                    <Switch>
                        <Route path={`${process.env.PUBLIC_URL + "/"}`} exact component={Form}/>

然后在表单组件中，我得到了可以在 codepen 中看到的主要表单内容。因为 .scss 是在 App.js 中导入的，所以我在 Form.js 中也得到了我的所有样式。我的问题是图标没有显示，只是矩形。因为没有 HTML 我不能简单地在 head 中导入 fontawesome，所以我决定直接在我的 style.sccs 中导入它。

我尝试@import "https://use.fontawesome.com/releases/v5.8.2/css/all.css";在我的 style.scss 中使用，但似乎找不到图标我需要如何在我的 css 文件中导入 fontawesome 以便它们被识别？

当我将几个图标导入组件时，我可以在 React 中使用它们的名称定期使用它们，但我需要能够在 css 部分中使用图标的 unicode。

  ul.ks-cboxtags li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    content: "\f067";
    transition: transform .3s ease-in-out;
}

标签： reactjsfont-awesome

解决方案

推荐阅读