What could be causing the FontAwesome social icons in <ul> to malfunction?

I'm a beginner and I've been following various tutorials to achieve my goal. The main objective is to create animated social icons in the footer. However, I have encountered an issue where the social icons from FontAwesome are not working.

When I place them within <ul> tags, they do not display properly, but when placed outside, they appear fine.

How can I troubleshoot this problem to make sure the icons show up correctly when placed inside <ul>?

This is the provided code:

HTML: 
<!DOCTYPE html>
    <html>
    ...
    ... (content omitted for brevity)
    ...
</html>

This is CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}
body{
    height: 100vh;
    width: 100%;
}
... (styling rules continued for brevity) ...
htmlcssfont-awesome

Answer №1

Icons were present, but unfortunately, they weren't visible. To make them stand out, I've assigned them a striking 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 class="circle"></div>
      <header>
        <a href="index.html" class="logo"> <img src="logo.jpg"></a>


      </header>


      </div>
      <div class="container">
        <div class="contact-box">
          <div class="left"></div>
          <div class="right">
            <h2>Contact Us</h2>
            <input type="text" class="field" placeholder="Your Name">
            <input type="text" class="field" placeholder="Your Email">
            <input type="text" class="field" placeholder="Phone">
            <textarea placeholder="Message" class="field"></textarea>
            <button class="btn">Send</button>

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

  <footer>
    <!-- <ul>
    <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
  
</ul> -->

    <a href="#"><i class="fa-brands fa-twitter"></i></a>
    <a href="#"><i class="fa-brands fa-facebook"></i></a>
    <a href="#"><i class="fa-brands fa-instagram"></i></a>

    <div style="color:red">
      <i class="fa-brands fa-twitter"></i>
      <i class="fa-brands fa-facebook"></i>
      <i class="fa-brands fa-instagram"></i>
    </div>
  </footer>

</html>

Answer №2

discovered the resolution!

HTML

    
    <!DOCTYPE html>
<html>

  <head>
    <title>Get in touch</title>
    <link rel="stylesheet" type="text/css" href="stylecontact.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 class="circle"></div>
      <header>
        <a href="index.html" class="logo"> <img src="logo.jpg"></a>


      </header>


      </div>
      <div class="container">
        <div class="contact-box">
          <div class="left"></div>
          <div class="right">
            <h2>Send Us a Message</h2>
            <input type="text" class="field" placeholder="Your Name">
            <input type="text" class="field" placeholder="Your Email">
            <input type="text" class="field" placeholder="Phone Number">
            <textarea placeholder="Type your message here" class="field"></textarea>
            <button class="btn">Send Message</button>

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

  <footer>
  
<ul>
    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"> </i></a> </li>
    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"> </i></a> </li>
    <li><a href="#"><i class="fa fa-facebook" 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%;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a line break in HTML using Bootstrap

Reference the source provided, specifically the red alert option. Here is an example: <div class="alert alert-dismissible alert-danger"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong> ...

htmlcsstwitter-bootstrap

Interacting with CSS buttons using Selenium

Currently, I am working on a test case in Java where I am using Selenium to record a series of events and then play them back on an application. Here is the code snippet I have: // *The app opens a new window* // Get handle of the main window Stri ...

javacssseleniumcss-selectorsclick

In search of a regular expression for identifying any of several classes

In the process of upgrading all my websites, I decided to redesign them so that all URL's default to lower case. This meant changing all image names and paths to lower case as well, which was accomplished using regexes. However, this action inadverten ...

htmlcssregex

A Guide to Utilizing Parameters in Javascript Strings

I'm in search of a solution but struggling to find a comprehensive explanation. I am working on a code where I need the flexibility to easily update strings or other parameters. What I aim for is passing values to a string when calling it through a ...

javascripthtml

Using jQuery to arrange information from an API into a table

Currently, I am in the process of learning jQuery as it is a new concept for me. I have attempted to make a request to an example API and received an array of objects that need to be listed in a table. However, I am facing difficulty in sorting it within t ...

javascripthtmljqueryjsonajax

Struggling to find solutions for debugging HTML codes in Visual Studio Code and linking my CSS page to my HTML page

I ran into some issues with linking my CSS stylesheet to my HTML pages. I tried using the <link rel="stylesheet" href="style.css"> command, where style.css is the name of the file. However, for some reason, it wasn't working ...

htmlcssdebugginglinker

Apply a new class to all Radio buttons that were previously selected, as well as the currently

Struggling with a simple code here, trying to figure out how to add color (class) to the selected radio button and the previous ones. For example, if button No3 is selected, buttons 1, 2, and 3 should get a new color. Below is the basic code snippet: < ...

javascriptjqueryhtmlcss

Creating a personalized, perfectly centered container with a specific width in Twitter Bootstrap

I've been struggling with a unique challenge for the past day without success. I can't seem to figure out where I am making a mistake. My goal is to design a fixed container layout using Bootstrap, which is precisely 33em wide and horizontally c ...

csstwitter-bootstraplessmargin

As the screen size decreases, stacked Font Awesome icons seem to vanish

Currently, I'm designing a form that requires the user to select a color scheme by clicking on circle font awesome icons. These icons are implemented using Bootstrap and when clicked, a stacked font-awesome icon appears. However, I've encountered ...

htmlcssvue.jsbootstrap-4font-awesome

Using jquery to toggle active nav links in Bootstrap

I'm currently working on integrating a jQuery function to automatically update the active status of the navigation links in my Bootstrap Navbar. The structure involves a base HTML file that extends into an app-specific base file, which is further exte ...

javascripthtmljquerydjangobootstrap-4

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

htmlcsstransformblur

Style the nth child of a particular type in CSS with a unique color scheme

Is there a way to select the nth child of type and apply different colors without assigning IDs because they are dynamically generated in a loop from a template engine? I found some useful information on this topic here: https://www.w3schools.com/cssref/ ...

htmlcss

Use Javascript to display specific div elements by clicking a button

I could really use some assistance, When I attempt to display the select div by clicking the button, the "id" that PHP generates returns a null response in the console. The requirement is to only show the div when clicking on the "Quick Quote" button. Pro ...

javascripthtml

Guide on stacking two divs on each other in response to a decrease in screen width

In this particular section, there is a div labeled programDescriptionDiv. Inside programDescriptionDiv, there are two separate divs. Normally, these two divs each take up 50% of the screen width. The goal is to have the second div stack below the first on ...

htmlcssflexbox

Can CSS be used to create drop down menus?

Is it possible to create a dropdown menu using only CSS, similar to what you would find in most applications? I have a simple menu bar at the top of my screen and I want to be able to hover over an item like "Item1" and see sub-items appear below it. I en ...

javascripthtmlcss

What is the method for sending a down arrow key in Capybara?

My unique requirement involves a specialized listbox automation that would benefit from simulating a down arrow keystroke and then pressing enter. The code snippet for pressing enter looks like this: listbox_example = find(input, "listbox-example") listb ...

htmlrubyseleniumcucumbercapybara

Ways to evenly distribute children in a row using CSS

https://i.stack.imgur.com/HmziN.png The image above showcases the desired effect I am aiming for. It is important to note that the width of the container div may vary. The child elements should have consistent spacing between each other as well as the le ...

css

Attempting to extract data from a text input field using AJAX and then transferring it to a different webpage

Having trouble getting the values entered in a textbox using ajax and sending them to another .php file. I was successful with a checkbox before, but unable to replicate it this time. Below is the code for the text boxes: <div align = "right"> & ...

phphtmlmysqlsql

Adjusting the width of Bootstrap 4 form validation messages for improved layout

Having some issues with Bootstrap 4 form validation and jquery. When the validation message is displayed, it strangely affects the width of the entire form. Check out my HTML: <div class="container l-login-container"> <main class="l-mainConten ...

jqueryhtmlformsvalidationbootstrap-4

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Can anyone help me with my issue related to using Ajax to fadeIn a background color in beforeSend and fadeOut in success? I seem to have made some mistakes but can't figure out what went wrong. var data={ ...

javascriptjquerycssajax