0

I use react-fontawesome module to display some brand icons.
When a favicon is set in <Head>...</Head>(imported from next/head), all react-fontawesome icons disappear.
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.

1 Answer 1

0

I had same problem. I my case helped importing fontawesome core css style

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.