Fontawesome 5 icon not showing in normal HTML and CSS file?-CodePudding

I am making simple website and I want to put social media icons on it.
I went to Fontawsome to take the icons and they are not showing on my site.

Here is the HTML:

    <head>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" 
      href="use.fontawesome.com/releases/v5.0.8/css/all.css">
    </head>


    <div id="social-menu">
          <div class="social-menu">
            <ul>
              <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
        </div>

Here is CSS:

.social-menu ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    display: flex;
}
.social-menu ul li {
    list-style: none;
    margin: 0 10px;
}
.social-menu ul li .fa {
    color: #000000;
    font-size: 25px;
    line-height: 50px;
    transition: .5s;
}
.social-menu ul li .fa:hover {
    color: #ffffff;
}

CodePudding user response：

Make sure you have installed Font Awesome Package which can be done using this command - npm install --save @fortawesome/fontawesome-free

or use the CDN

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>

CodePudding user response：

In your case use first, use font awesome CDN if already use then replace your code to class fa replace to fab then show your icon correctly.

CDN:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />

Code:

<div id="social-menu">
    <div class="social-menu">
        <ul>
            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
        </ul>
    </div>
</div>