Значки Font Awesome теперь не отображаются после того, как код не был изменен

Question

Я имею дело с проблемой, касающейся значков моего шрифта. Я только недавно зарегистрировался на прошлой неделе и скопировал и вставил необходимую ссылку в свой индекс. При создании CSS все работало нормально. С тех пор я не трогал свой код, и теперь он вообще не отображается. Кто-нибудь знает, в чем может быть дело? Может быть, это просто отличный сервер шрифтов?

(примечание: я пока не хочу пользоваться их поддержкой, потому что это обойдется мне в 99 долларов в год за подписку.

Я прикрепил код ниже, если это полезно, но я чувствую, что это проблема третьей части, поскольку код не был изменен.

ИНДЕКС

<!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;
  }

}

javascript html css reactjs font-awesome

1

DeBoer753 30 Май 2023 в 21:28

Answer 1

Это случилось сегодня и со мной. Есть проблема с их сервисом:

https://status.fortawesome.com/

Да, это URL: fortawesome. Не уверен, почему.

2

Michael Baggett 30 Май 2023 в 21:42

Теперь он снова появился у меня, но теперь функции, которые я к нему приложил, не работают. Та же проблема и для вас?

–

DeBoer753

30 Май 2023 в 21:55

Я вернулся к своему старому документу, так что теперь я вернулся туда, где был, за исключением нескольких исправлений, которые мне нужно сделать снова. Ну что ж. Рад узнать, что это проблема с сервером. Теперь буду знать в следующий раз.

–

DeBoer753

30 Май 2023 в 22:01

Answer 2

Если вы используете комплекты, то скрипт был обновлен, и теперь валится без дополнительных заголовков csp. Мы обнаружили, что нам нужно добавить https://kit.fontawesome.com в исходный код по умолчанию, а не только скрипт -src, где это было. Вместо этого вы, вероятно, могли бы добавить его только в fetch-src, но мы не использовали это.

0

Mike 31 Май 2023 в 09:50

Также не забудьте оставить 'ka-p.fontawesome.com' в font-src

–

Mike

31 Май 2023 в 09:51

Значки Font Awesome теперь не отображаются после того, как код не был изменен

2 ответа

Похожие вопросы

Новые вопросы

javascript