Question

我使用react-fontawesome模块显示一些品牌图标。
在Flutter activity（从<Head>...</Head>导入）中设置了图标图标后，所有react-fontawesome图标都会消失。
请告诉我如何解决这个问题。

next/head

// /pages/index.js

import Head from 'next/head';
import { Container, Row, Col } from 'react-bootstrap'
import BaseLayout from '../components/baselayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBlog } from '@fortawesome/free-solid-svg-icons';

export default () => (
  <>
    <Head>
      <title>{'NextBlog'}</title>
      {/* <link rel="shortcut icon" href="/favicon.ico" />  HERE */}
    </Head>
    <BaseLayout>
      <div className="mt-3 mb-5 d-flex justify-content-center">
        <h1>TOP PAGE</h1>
      </div>
      <Container>
        <Row className="mb-5 d-flex justify-content-center">
          <Col sm={4}>
            {
              [
                'This site is established to learn React and NextJS.',
                'I will learn TypeScript someday.'
              ].map((msg, idx) => {
                return (<p key={idx}>{msg}</p>);
              })
            }
          </Col>
          <Col sm={4}>
            <span className="d-flex justify-content-center">
              <img src="/react.svg" alt="React" className="content-logo" id="reactLogo" />
            </span>
          </Col>
        </Row>
        <Row className="d-flex justify-content-center">
          <Col sm={4}>
            {
              [
                'But I like DATABASE most, especially PostgreSQL.',
                'I LOVE PLPGSQL!'
              ].map((msg, idx) => {
                return (<p key={idx}>{msg}</p>);
              })
            }
          </Col>
          <Col sm={4}>
            <span className="d-flex justify-content-center">
              <img src="/database.svg" alt="React" className="content-logo" id="dbLogo" />
            </span>
          </Col>
        </Row>
      </Container>
    </BaseLayout>
    <style jsx>{`
      .content-logo {
        max-width: 50%;
        height: auto;
        opacity: 0.3;
      }
      #reactLogo {
        animation: 5s linear infinite rotation1;
      }
      @keyframes rotation1{
        0%{ transform:rotate(0);}
        100%{ transform:rotate(360deg); }
      }
    `}</style>
  </>
);

谢谢。

Answer 1

我有同样的问题。我的案例有助于导入fontawesome核心CSS样式

//_app.js
import "@fortawesome/fontawesome-svg-core/styles.css";

设置收藏夹图标时未出现React-FontAwesome图标

1 个答案: