1

I already link a font awesome cdn link in head but I can't find icon.

Someone help me I want menu icon to do responsive website. What should I do? I also open in Firefox. Icon also not showing there. And also Microsoft Edge. When I open devtool and find my tag as in the picture.icon not showing I do nothing in css. Is this normal

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <nav>
        <div class="container navbar">
            <a href="#" class="logo">Portfolio</a>

            <div class="nav-div">
                    <i class="fa-solid fa-bars"></i>
            </div>
            <input type="checkbox" id="menu">
            <ul class="active">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#works">Works</a></li>
                <li><a href="#resume">Skill</a></li>
                <li><a href="#service">Service</a></li>
                <li><a href="#" class="btn">Hire Me</a></li>
            </ul>
        </div>
    </nav>
ATP
  • 2,939
  • 4
  • 13
  • 34
Adrian
  • 21
  • 3
  • 1
    Can you post your CDN link? – jQueeny Aug 23 '23 at 18:27
  • 1
    Does this answer your question? [Font Awesome icons are not working, I have included all required files](https://stackoverflow.com/questions/24922833/font-awesome-icons-are-not-working-i-have-included-all-required-files) – ATP Aug 23 '23 at 19:20

3 Answers3

1

Make sure the version you have linked in your HTML is the same version of icon you are using. For example if you are trying to use a V6 icon but are linking a V5 library it won't work. Also, make sure you are not using a premium icon but linking the free library.

jQueeny
  • 714
  • 2
  • 13
  • I already link the same version of V6 icon and link in html. And I also switch both to V5 and nothing change. – Adrian Aug 23 '23 at 18:31
  • The `fa-solid fa-bars` is a V6 icon so stick with V6. Can you check your browser dev tools to check for errors. – jQueeny Aug 23 '23 at 18:34
  • I upload pic. Please check it. – Adrian Aug 23 '23 at 18:42
  • Font awesome uses the `` element so a browser will try to style it as italic in the absence of an overriding style, so yes. Please post your CDN link and check the console/network tab on your dev tools for errors. – jQueeny Aug 23 '23 at 18:45
1

If you have the property font-family on the * in css, remove this because this can cause conflict with font-awesome.

This answer can help you more: https://stackoverflow.com/a/29979799/22432060

Gabriel Nunes
  • 11
  • 2
1

I got the answer by adding link from font awesome

<script src="https://kit.fontawesome.com/7823c06798.js" crossorigin="anonymous"></script>
<nav>
    <div class="container navbar">
        <a href="#" class="logo">Portfolio</a>
        <div class="nav-div">
            <label for="menu">
                <i class="fa-solid fa-bars"></i>
            </label>
        </div>
Adrian
  • 21
  • 3