Question 178945 in Html Question posted in
Some basic documentation can be found here.

Why are Font Awesome Icons not showing up after no code was changed?

I am dealing with an issue regarding my font awesome icons. I just recently signed up last week and copy and pasted the necessary link into my index. Everything was working fine when creating the CSS. I havent touched my code since and now it does not show up at all. Does anyone know what the issue could be? Is is maybe just the font awesome server?

(note: I dont want to use their support quite yet because it will cost me the $99 a year subscription fee.

I have attached code below if helpful, but I feel like it is a thrid part issue since no code was changed.

INDEX

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script src="https://kit.fontawesome.com/896b83dcf2.js" crossorigin="anonymous"></script>
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

HTML

// REACT:
import React, { useState } from 'react'

// ROUTER:
import { Link } from 'react-router-dom'

// COMPONENTS:
import DropDown from './DropDown'

// IMGS:
import cbmLogo from '../../imgs/CBMedia_Black.png'

// CSS:
import './NavBar2.css' 

// NAVBAR2:
export default function NavBar2() {
  const [click, setClick] = useState(false)
  const [dropdown, setDropdown] = useState(false)

  const handleClick = () => setClick(!click)
  const closeMobileMenu = () => setClick(false)

  const onMouseEnter = () => {
    if (window.innerWidth < 960) {
      setDropdown(false)
    } else {
      setDropdown(true)
    }
  }

  const onMouseLeave = () => {
    if (window.innerWidth < 960) {
      setDropdown(false)
    } else { 
      setDropdown(false)
    }
  }

  return (
    <>

      <nav className='navbar'>

          <div className='logo-name-box'>
            <Link to='/'><img src={cbmLogo} className='cbm-logo' alt="" srcset=""/></Link>
            <Link to='/' className='navbar-logo'>Chris Blossom Media</Link>
          </div>

          {/* <h1 className='navbar-logo-mobile'>Chris Blossom Media</h1> */}

          <div className='menu-icon' onClick={handleClick}>
            <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
          </div>


        <ul className={click ? 'nav-menu active' : 'nav-menu'}>
          <li className='nav-item'><Link to='/services' className='nav-links' onClick={closeMobileMenu }>Services</Link></li>
          <li className='nav-item' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}><Link to='/work' className='nav-links' onClick={closeMobileMenu}>Work <i className='fas fa-caret-down'/></Link>{dropdown && <DropDown />}</li>
          
          <li className='nav-item'><Link to='/reviews' className='nav-links' onClick={closeMobileMenu }>Reviews</Link></li>
          <li className='nav-item'><Link to='/about' className='nav-links' onClick={closeMobileMenu }>About</Link></li>
          <li className='nav-item'><Link to='/contact' className='nav-links' onClick={closeMobileMenu }>Contact</Link></li>
        </ul>

      </nav>

    </>
)
}

CSS

.navbar {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 2px 20px rgb(54, 54, 54);
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  top: 0;
  position: sticky;
  z-index: 6;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
  border: 1px red solid;
}

.logo-name-box {
  display: flex;
  flex-direction: row;
  margin-left: 24px;
  gap: 10px;
  align-items: center;
  border: 1px green solid;
}

.cbm-logo {
  width: 50px;
  border: 1px green dashed;

}

.navbar-logo {
  color: #000000;
  justify-self: start;
  padding-bottom: 2px;
  font-weight:bold;
  cursor: pointer;
  text-decoration: none;
  font-size: 25px;
  width: 280px;
  align-self: center;
  font-family: cursive;
  border: 1px green dashed;
}

.fa-firstdraft {
  margin-left: 0.5rem;
  font-size: 1.6rem;
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px;
  list-style: none;
  text-align: center;
  width: 70vw;
  justify-content: end;
  margin-right: 2rem;
  border: 1px rgb(21, 0, 255) solid;
}

.nav-item {
  display: flex;
  align-items: center;
  height: 80px;
  border: 1px rgb(255, 0, 157) dashed;
}

.nav-links {
  color: rgb(0, 0, 0);
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 18px;
}

.nav-links:hover {
  background-color: #d8d8d8;
  border-radius: 4px;
  transition: all 0.2s ease-out;
  
}

.fa-bars {
  color: #000000;
  width: 50px;
  height: 50px;
}

.nav-links-mobile {
  display: none;
}

.menu-icon {
  display: none;
}

@media screen and (max-width: 960px) {

  .navbar {
    justify-content: space-between;
  }

  .NavbarItems {
    position: relative;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px;
    left: -180%;
    opacity: 1;
    transition: all 0.5s ease;
  }

  .nav-menu.active {
    background: #ffffff;
    left: 0;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 1;
    padding-left: 0px;

  }

  .nav-links {
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: table;
  }

  .nav-links:hover {
    background-color: #d8d8d8;
    border-radius: 0;
  }

  .navbar-logo {
    /* display: none; */
    position: absolute;
    top: 0;
    left: 5px;
    margin-left: 0;
    transform: translate(25%, 50%);
  }

  .menu-icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
    border: 1px red solid;
  }

  .fa-times {
    color: #040404;
    font-size: 2rem;
  }

  .nav-links-mobile {
    display: block;
    text-align: center;
    padding: 1.5rem;
    margin: 2rem auto;
    border-radius: 4px;
    width: 80%;
    background: #1888ff;
    text-decoration: none;
    color: #fff;
    font-size: 1.5rem;
  }

  .nav-links-mobile:hover {
    background: #fff;
    color: #1888ff;
    transition: 250ms;
  }

}
Tags:

2

Answers


  1. 0

    This happened today for me as well. There is an issue with their service:

    https://status.fortawesome.com/

    Yes, that is the URL: fortawesome. Not sure why.

    Login or Signup to reply.
  2. 0

    If you are using kits, the script has been updated, and now falls over without additional csp headers. We found we needed to add https://kit.fontawesome.com to the default-src, not just script-src where it was. You could probably add it just to fetch-src instead, but we weren’t using that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search