react-fontawesome Huge icon size when add <link> tags to head

Describe the bug Icon sizes become absurdly huge when a simple <link ...> tag added to the

Reproducible test case I'm unable to share all the code (which is quite long) but here is an (untested) simple version. Everything was fine with this code until I've added some link tags to set favicon. I've tried to shut them off one by one but it seems even a single link tag breaks the icons. Screenshot added below. Might be related to https://github.com/FortAwesome/react-fontawesome/issues/284. I don't know

import React, {ReactNode, useState} from 'react';
import Link from 'next/link';
import Image from 'next/image';
import Head from 'next/head';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faBars} from '@fortawesome/free-solid-svg-icons';
import SocialMediaIcons from './SocialMediaIcons';
import Menu from './Menu';

type Props = {
  children?: ReactNode;
  preview?: boolean;
};

const Layout = ({children, preview = false}: Props) => {
  const [isOpen, setIsOpen] = useState(false);
  const year = new Date().getFullYear();

  return (
    <div
      className="subpixel-antialiased flex flex-col h-screen overflow-y-scroll justify-between bg-abes-grey"
      onClick={() => {
        if (isOpen) {
          setIsOpen(false);
        }
      }}
    >
      <Head>
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest" />
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <div className="bg-hero bg-center bg-cover bg-fixed">
        <header className="container mx-auto">
          <div className="flex flex-row justify-between pt-3 mx-3">
            <FontAwesomeIcon
              className={`text-3xl z-20 sticky top-0 cursor-pointer ${
                isOpen ? 'text-abes-red' : 'text-abes-blue'
              }`}
              icon={faBars}
              onClick={() => setIsOpen(!isOpen)}
            />
            <Menu isOpen={isOpen} />
            <div className="mt-px space-x-1 items-center">
              <SocialMediaIcons />
            </div>
          </div>
          <div className="flex flex-col flex-wrap flex-1 pb-28 pt-20 items-center justify-center h-full">
            <Link href="/">
              <a>
                <Image
                  src="/img/logo.svg"
                  width={426}
                  height={150}
                />
              </a>
            </Link>
          </div>
        </header>
      </div>
    </div>
  );
};

export default Layout;

Expected behavior To not get the absurdly huge icons

Desktop (please complete the following information):

Browser Firefox
Version 85.0.1 (64-bit)

Additional context Screenshot from 2021-02-22 01-22-59

Feb 21 '21 22:02 thiras

I've fixed the problem with this solution; https://github.com/FortAwesome/react-fontawesome/issues/284#issuecomment-691707228

Feb 21 '21 22:02 thiras

Thanks for the work around @thiras. Though, that's not really fixing the problem, it's just a bandaid until FontAwesome can address the issue. Can you consider re-opening?

Apr 18 '21 22:04 chinanderm

@chinanderm not sure if it's a fixable problem or a structural but I've opened the issue as you requested.

Apr 19 '21 01:04 thiras