Huge icon size when add <link> tags to head #412

thiras · 2021-02-21T22:23:32Z

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 #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

The text was updated successfully, but these errors were encountered:

thiras · 2021-02-21T22:35:56Z

I've fixed the problem with this solution; #284 (comment)

chinanderm · 2021-04-18T22:23:48Z

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?

thiras · 2021-04-19T01:35:39Z

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

thiras closed this as completed Feb 21, 2021

thiras reopened this Apr 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Huge icon size when add <link> tags to head #412

Huge icon size when add <link> tags to head #412

thiras commented Feb 21, 2021 •

edited

Loading

thiras commented Feb 21, 2021

chinanderm commented Apr 18, 2021 •

edited

Loading

thiras commented Apr 19, 2021

Huge icon size when add <link> tags to head #412

Huge icon size when add <link> tags to head #412

Comments

thiras commented Feb 21, 2021 • edited Loading

thiras commented Feb 21, 2021

chinanderm commented Apr 18, 2021 • edited Loading

thiras commented Apr 19, 2021

thiras commented Feb 21, 2021 •

edited

Loading

chinanderm commented Apr 18, 2021 •

edited

Loading