css 字体真棒图标现在不显示后没有代码被更改

wz3gfoph 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(344)

我正在处理一个关于我的字体真棒图标的问题。我上周刚刚注册了，并将必要的链接复制粘贴到我的索引中。在创建CSS时，一切都很好。从那以后我就没有碰过我的代码，现在它根本没有显示出来。有谁知道可能是什么问题吗？是不是可能只是字体真棒服务器？
(note：我还不想使用他们的支持，因为这将花费我每年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;
  }

}

css

来源：https://stackoverflow.com/questions/76367652/font-awesome-icons-now-not-showing-up-after-no-code-was-changed