设置 favicon 后，React-FontAwesome 图标不会出现

Question

I use react-fontawesome module to display some brand icons.我使用 react-fontawesome 模块来显示一些品牌图标。
When a favicon is set in <Head>...</Head> (imported from next/head ), all react-fontawesome icons disappear.当在<Head>...</Head>中设置图标时（从next/head导入），所有 react-fontawesome 图标都会消失。
Pleas tell me how to solve this problem.请告诉我如何解决这个问题。

// /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>
  </>
);

// /components/header.js

import React from 'react';
import Link from 'next/link';
import { Nav, Navbar, NavDropdown, Tooltip, OverlayTrigger } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faReact, faTwitter, faInstagram, faTwitch } from '@fortawesome/free-brands-svg-icons';

export default () => {
  const brandLogoStyle = {
    paddingRight: '15px'
  };
  const snsLogoStyle = {
    padding : '0px 15px'
  };
  
  return (
    <Navbar bg="#ffffff" expand="md">
      <div style={brandLogoStyle}>
        <Link href="/" passHref>
          <Nav.Link>
            {/* This component doesn't appear */}
            <FontAwesomeIcon icon={faReact} size="2x" color="#00bfff" fixedWidth />
          </Nav.Link>
        </Link>
      </div>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav>
          <Link href="/" passHref>
            <Nav.Link>Home</Nav.Link>
          </Link>
          <Link href="/about" passHref>
            <Nav.Link>About</Nav.Link>
          </Link>
          <Link href="/blog" passHref>
            <Nav.Link>Blog</Nav.Link>
          </Link>
          <Link href="/pso2" passHref>
            <Nav.Link>PSO2</Nav.Link>
          </Link>
          <Link href="/dietrecord" passHref>
            <Nav.Link>Diet Record</Nav.Link>
          </Link>
          <NavDropdown className="d-block d-md-none" title="External" id="basic-nav-dropdown">
            <NavDropdown.Item href="https://twitter.com/moootoko_dev" target="_blank">twitter</NavDropdown.Item>
            <NavDropdown.Item href="https://www.instagram.com/taku_anp/" target="_blank">instagram</NavDropdown.Item>
            <NavDropdown.Item href="https://www.twitch.tv/mtk0g3" target="_blank">twitch</NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Nav className="ml-auto">
          {
            [
              {name: 'twitter', fa: faTwitter, url: 'https://twitter.com/moootoko_dev', color: null},
              {name: 'instagram', fa: faInstagram, url: 'https://www.instagram.com/taku_anp', color: '#ff69b4'},
              {name: 'twitch', fa: faTwitch, url: 'https://www.twitch.tv/mtk0g3', color: '#9932cc'}
            ].map((obj) => (
            <OverlayTrigger
              key={obj.name}
              placement="bottom"
              overlay={
                <Tooltip id={`tooltip-${obj.name}`}>
                  <strong>{obj.name}</strong>
                </Tooltip>
              }
            >
              <Nav.Item className="d-none d-md-block" style={snsLogoStyle}>
                <a href={obj.url} target="_blank">
                  {/* This component doesn't appear */}
                  <FontAwesomeIcon icon={obj.fa} size="2x" color={obj.color} />
                </a>
              </Nav.Item>
            </OverlayTrigger>
          ))}
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

Thank you.谢谢你。

Answer 1

I had same problem.我有同样的问题。 I my case helped importing fontawesome core css style我的案例帮助导入了 fontawesome 核心 css 样式

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

设置 favicon 后，React-FontAwesome 图标不会出现

问题描述

1 个解决方案

解决方案1
0 2020-11-23 08:13:22

设置 favicon 后，React-FontAwesome 图标不会出现

问题描述

1 个解决方案

解决方案1 0 2020-11-23 08:13:22

解决方案1
0 2020-11-23 08:13:22