Why FontAwesome social icons in <ul> are not working?-CodePudding

I'm noob and I'm following different tutorial to achieve my goal and the goal is to make animated social icons in the footer and the problem is that the socials icons from FontAwesome are not working.

If i put them in < ul > they are not working but outside i can see them .-

How can i solve this to see them when I put them in < ul > ?

This is the code : HTML :

   <!DOCTYPE html>
    <html>
    <head>
    <title>Contact us</title>
    <link rel="stylesheet" type="text/css" href="stilecontact.css">
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/17fe744bb9.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
    
        <section>
         <div ></div>
         <header>
             <a href ="index.html" > <img src ="logo.jpg"></a>
         
            
         </header>
      
       
     </div>
    <div >
        <div >
            <div ></div>
            <div >
                <h2>Contact Us</h2>
                <input type="text"  placeholder="Your Name">
                <input type="text"  placeholder="Your Email">
                <input type="text"  placeholder="Phone">
                <textarea placeholder="Message" ></textarea>
                <button >Send</button>
                
            </div>
        </div>
    </div>
</body>

<footer>
<ul>
    <li><a href="#"><i ></i></a></li>
    <li><a href="#"><i ></i></a></li>
    <li><a href="#"><i ></i></a></li>
  
</ul>

</footer>
</html>

This is CSS:

    *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

body{
    height: 100vh;
    width: 100%;
}


.container{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 100px;
}

.container:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url("team.jpg") no-repeat center;
    background-size: cover;
    filter: blur(50px);
    z-index: -1;
}
.contact-box{
    max-width: 850px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
}

.left{
    background: url("team.jpg") no-repeat center;
    background-size: cover;
    height: 100%;
}

.right{
    padding: 25px 40px;
}

h2{
    position: relative;
    padding: 0 0 10px;
    margin-bottom: 10px;
}

h2:after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 4px;
    width: 50px;
    border-radius: 2px;
    background-color: #2ecc71;
}

.field{
    width: 100%;
    border: 2px solid rgba(0, 0, 0, 0);
    outline: none;
    background-color: rgba(230, 230, 230, 0.6);
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    margin-bottom: 22px;
    transition: .3s;
}

.field:hover{
    background-color: rgba(0, 0, 0, 0.1);
}

textarea{
    min-height: 150px;
}

.btn{
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #2ecc71;
    color: #fff;
    font-size: 1.1rem;
    border: none;
    outline: none;
    cursor: pointer;
    transition: .3s;
}

.btn:hover{
    background-color: #27ae60;
}

.field:focus{
    border: 2px solid rgba(30,85,250,0.47);
    background-color: #fff;
}

@media screen and (max-width: 880px){
    .contact-box{
        grid-template-columns: 1fr;
    }
    .left{
        height: 200px;
    }
}

footer {
    margin: o;
    padding: o;
    box-sizing:  border-box;

}

body footer {
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;

}
ul 
{
    position: relative;
    display: flex;
    color: #fff;
}

ul li
{
 position: relative;
 list-style: none;
 margin: 0 20px;
 cursor: pointer;
}

ul li a 
{
    text-decoration: none;
}

ul li a .fa
{
    font-size: 6em;
    color: #222;

}
ul li ::before
{
    font-family: fontAwesome;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 6em;
    height: 0;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}

ul li:nth-child(1)::before
{
    content: '\f099';
    color: #1da1f2;
    border-bottom: 4px solid #1da1f2;

}
ul li:nth-child(2)::before
{
    content: '\f09a';
    color: #07476f;
    border-bottom: 4px solid #1da1f2;

}
ul li:nth-child(3)::before
{
    content: '\f16d';
    color:  #f24f1d;
    border-bottom: 4px solid #f2391d;

}

CodePudding user response：

Icons were there, but they were not visible. So for your reference, I have given red color.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

body{
    height: 100vh;
    width: 100%;
}


.container{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 100px;
}

.container::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url("team.jpg") no-repeat center;
    background-size: cover;
    filter: blur(50px);
    z-index: -1;
}
.contact-box{
    max-width: 850px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 0.19);
}

.left{
    background: url("team.jpg") no-repeat center;
    background-size: cover;
    height: 100%;
}

.right{
    padding: 25px 40px;
}

h2{
    position: relative;
    padding: 0 0 10px;
    margin-bottom: 10px;
}

h2::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 4px;
    width: 50px;
    border-radius: 2px;
    background-color: #2ecc71;
}

.field{
    width: 100%;
    border: 2px solid rgba(0, 0, 0, 0);
    outline: none;
    background-color: rgba(230, 230, 230, 0.6);
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    margin-bottom: 22px;
    transition: 0.3s;
}

.field:hover{
    background-color: rgba(0, 0, 0, 0.1);
}

textarea{
    min-height: 150px;
}

.btn{
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #2ecc71;
    color: #fff;
    font-size: 1.1rem;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
}

.btn:hover{
    background-color: #27ae60;
}

.field:focus{
    border: 2px solid rgba(30, 85, 250, 0.47);
    background-color: #fff;
}

@media screen and (max-width: 880px){
    .contact-box{
        grid-template-columns: 1fr;
    }
    .left{
        height: 200px;
    }
}

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body footer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;

}
ul 
{
    position: relative;
    display: flex;
    color: #fff;
}

ul li
{
 position: relative;
 list-style: none;
 margin: 0 20px;
 cursor: pointer;
}

ul li a 
{
    text-decoration: none;
}

ul li a .fa
{
    font-size: 6em;
    color: #222;

}
ul li::before
{
    font-family: sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 6em;
    height: 0;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}

ul li:nth-child(1)::before
{
    content: '\f099';
    color: #1da1f2;
    border-bottom: 4px solid #1da1f2;

}
ul li:nth-child(2)::before
{
    content: '\f09a';
    color: #07476f;
    border-bottom: 4px solid #1da1f2;

}
ul li:nth-child(3)::before
{
    content: '\f16d';
    color: #f24f1d;
    border-bottom: 4px solid #f2391d;

}

<!DOCTYPE html>
<html>

  <head>
    <title>Contact us</title>
    <link rel="stylesheet" type="text/css" href="stilecontact.css">
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/17fe744bb9.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>

    <section>
      <div ></div>
      <header>
        <a href="index.html" > <img src="logo.jpg"></a>


      </header>


      </div>
      <div >
        <div >
          <div ></div>
          <div >
            <h2>Contact Us</h2>
            <input type="text"  placeholder="Your Name">
            <input type="text"  placeholder="Your Email">
            <input type="text"  placeholder="Phone">
            <textarea placeholder="Message" ></textarea>
            <button >Send</button>

          </div>
        </div>
      </div>
  </body>

  <footer>
    <!-- <ul>
    <li><a href="#"><i ></i></a></li>
    <li><a href="#"><i ></i></a></li>
    <li><a href="#"><i ></i></a></li>
  
</ul> -->

    <a href="#"><i ></i></a>
    <a href="#"><i ></i></a>
    <a href="#"><i ></i></a>

    <div style="color:red">
      <i ></i>
      <i ></i>
      <i ></i>
    </div>
  </footer>

</html>

CodePudding user response：

found the solution !

HTML

    <!DOCTYPE html>
<html>

  <head>
    <title>Contact us</title>
    <link rel="stylesheet" type="text/css" href="stilecontact.css">
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    
  </head>

  <body>

    <section>
      <div ></div>
      <header>
        <a href="index.html" > <img src="logo.jpg"></a>


      </header>


      </div>
      <div >
        <div >
          <div ></div>
          <div >
            <h2>Contact Us</h2>
            <input type="text"  placeholder="Your Name">
            <input type="text"  placeholder="Your Email">
            <input type="text"  placeholder="Phone">
            <textarea placeholder="Message" ></textarea>
            <button >Send</button>

          </div>
        </div>
      </div>
  </body>

  <footer>
  
<ul>
    <li><a href="#"><i  aria-hidden="true"> </i></a> </li>
    <li><a href="#"><i  aria-hidden="true"> </i></a> </li>
    <li><a href="#"><i  aria-hidden="true"> </i></a> </li>
</ul>
    </div>
  </footer>

</html>

CSS

 *{
        margin: 0;
        padding: 0;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #000000;
    }
    ul{
        position: relative;
        display: flex;
    }
    ul li{
        position: relative;
        list-style: none;
        margin: 0 20px;
        cursor: pointer;
    }
    ul li a{
        text-decoration: none;}
    ul li a .fa{
        font-size: 6em;
        color: #222;
    }
ul li a .fa:hover{
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
    ul li:before{
        position: absolute;
      font-family: FontAwesome;
        top: -10px;
        left: 0;
        font-size: 6em;
        width: 100%;
        height: 0;
        overflow: hidden;
        transition: .3s ease-in-out;
    }
    ul li:nth-child(1)::before{
        content: '\f099';
        color: #1da1f2;
        border-bottom: 4px solid #1da1f2;
    }
    ul li:nth-child(2)::before{
        content: '\f232';
        color: #25d366;
        border-bottom: 4px solid #25d366;
    }
    ul li:nth-child(3)::before{
        content: '\f16a';
        color: #ff0000;
        border-bottom: 4px solid #ff0000;
    }
    ul li:hover:before{
        height: 110%;
    }