I can't seem to get the Font Awesome icons to display properly. What could be the issue?

How can I get Fontawesome icons to display properly in the footer? Despite having my CSS and HTML files in the same directory, the icons remain invisible. Additionally, the page seems to be loading slower than usual. I have provided all necessary information, but the issue persists. Any suggestions or solutions would be greatly appreciated.

Here's my code:

footer {
  background-color: #33383c !important;
  padding: 70px 0px;
}

footer ul li {
  padding: 5px 0px;
}

.adress span,
.contact span,
.social span {
  color: #FFF !important;
  font-weight: 800;
  padding-bottom: 10px;
  margin-bottom: 20px;
  display: block;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 3px;
}

.adress li p,
.contact li a,
.social li a {
  color: #FFF !important;
  letter-spacing: 2px;
  text-decoration: none;
  font-size: 15px;
}

.social li {
  float: left;
}

.adress,
.contact,
.social {
  list-style: none;
}

.fa {
  color: white !important;
  margin-right: 15px;
  font-size: 14px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12">
        <ul class="adress">
          <span>Address</span>
          <li>
            <p>ENGLAND</p>
          </li>

          <li>
            <p>+12905555555555</p>
          </li>

          <li>
            <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c4c7c6e5c2c8c4cc"><em>[email protected]</em></a></p>
          </li>
        </ul>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <ul class="contact">
          <span>Contact</span>
          <li>
            <a href="#">Contact Form</a>
          </li>

          <li>
            <a href="#">About</a>
          </li>
        </ul>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
        <ul class="social">
          <span>SOCIAL</span>
          <li>
            <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-github fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Answer №1

After experimenting with your code on my own browser, I was able to recreate the issue you described.

The SO snippet platform tends to modify certain elements (such as adding a doctype or body element if necessary) when running code snippets, which may explain why the font awesome icons were not loading in the raw local version of the code. Unfortunately, the exact reason for this behavior is unknown at this time.

If you inspect the file using the developer tools locally, you will see that the icons are not being loaded.

Adding "https:" to the beginning of the URL allowed the icons to load properly. So, make sure to use this updated link:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Answer №2

I've found this solution to be effective for me.

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <meta charset="utf-8" />
    <title>Custom Font-Awesome</title>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/css">
        footer{
            background-color: #33383c !important;
            padding:70px 0px;
        }          

        footer ul li{
           padding:5px 0px;
        }

        .adress span , .contact span , .social span{
          color: #FFF !important; 
          font-weight: 800; 
          padding-bottom: 10px; 
          margin-bottom: 20px;
          display: block;
          text-transform: uppercase;
          font-size: 20px;
          letter-spacing: 3px;
        }

        .adress li p , .contact li a , .social li a{
           color:#FFF !important;
           letter-spacing: 2px;
           text-decoration:none;
           font-size:15px;
        }

        .social li{
           float:left;
        }

        .adress , .contact , .social {
           list-style: none;
        }
    </style>
</head>

<body>
 <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <ul class="social">
                       <span>SOCIAL</span>    
                       <li>
                            <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
                       </li>
                      
                       <li>
                            <a href="#"><i class="fa fa-github fa-2x"></i></a>
                       </li>
                        
                       <li>
                            <a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
                       </li>
                       
                       <li>
                            <a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
                       </li>
                        
                       <li>
                            <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
                      </li>
                     </ul>
                </div>
           </div> 
        </div>
    </footer>

</body>

</html>

Have you attempted to ping maxcdn.bootstrapcdn.com?

$] ping maxcdn.bootstrapcdn.com
...
^C
--- maxcdn.bootstrapcdn.com ping statistics ---
3 packets transmitted, 3 received, 0% packet loss, time 2002ms

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

What could be causing the malfunction in my 'sort' function? I have thoroughly checked for errors but I am unable to locate any

Exploring the world of JavaScript objects to enhance my understanding of functions and object manipulation. I have created a program that constructs an Array of Objects, each representing a person's 'firstName', 'middleName', and & ...

What steps are involved in generating a scene dynamically with A-Frame?

Looking to transition from declarative coding in js and html to a programmatic approach with Aframe? You might be wondering if it's possible to modify your scene dynamically, here is an example of what you're trying to achieve: <!DOCTYPE html ...

Enhance Your Website with Stunning Bootstrap Icons

I have been attempting to utilize this bootstrap signup template here, but upon rendering it, the icons for the user, email, password, and so forth are not appearing as expected. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email ...

Developing a form using jQuery/ajax

Is there a way to update the Contact Us form in Div without redirecting to another thank you page after submission? I want to replace the contact form in that Div with a "Thank You" message upon successful validation. Any suggestions or demo/download code ...

Is there a way to incorporate CSS or tables when converting HTML to PDF using JavaScript?

While working on a project, I successfully converted an HTML file into a PDF. However, the output did not display the CSS design. Can anyone provide suggestions on how to include CSS design in the PDF file? Below is the JavaScript function code: $(funct ...

Unable to trigger click event

I apologize for asking the same question again, but I'm really struggling with this seemingly easy (or difficult?) code problem. Despite trying out Rory McCrossan's solution from here, it still doesn't seem to work for me. Can someone please ...

There seems to be a problem with how the navbar is being displayed in ResponsiveSlides.js

I am currently using WordPress, but I have come here seeking help with a jQuery/CSS issue. I am utilizing responsiveSlides.js to create a simple slideshow, however, when viewing it here at gallery link, it appears that something is not quite right. STEPS: ...

Switching the file format from HTML to .ASP resulted in the loss of the website's design elements and images

After initially creating an HTML file, I decided to rename it with a .asp extension for uploading online. To do this, I copied the original HTML file and moved it into a folder containing .asp files. However, after replacing the existing file, my website l ...

Tips on adjusting the scrollbar color with CSS

Check out my jsfiddle here I am attempting to modify the color of the scrollbar, but unfortunately it is not working as expected. This is the CSS code I am using: .flexcroll { scrollbar-face-color: #367CD2; scrollbar-shadow-color: #FFFFFF; ...

Tips for updating the minimum value to the current page when the button is pressed on the input range

When I press the next button on the current page, I want to update the value in a certain way. https://i.stack.imgur.com/XEiMa.jpg I have written the following code but it is not working as expected: el.delegate(".nextbtn", "click", f ...

Why isn't my custom HTML attribute displaying correctly?

In my current React app project, I have been incorporating custom attributes to HTML tags and React components for End-to-End (E2E) tests using Testcafe. However, I am facing an issue where the additional data-test="burger-menu-btn" attribute is ...

Utilizing jQuery to dynamically load and display multiple files within a single div, replacing any previously loaded content

Forgive my lack of experience, as I am just starting out with this and it may be a simple issue. My goal is to have an empty div (popBox) load a file when a link is clicked, but currently I am struggling to overwrite the content in the div when clicking o ...

The Jquery watermark extension in IE9 is capable of transmitting the watermark as the primary value of the form

I have integrated a plugin into my project. The plugin can be downloaded from this link. However, I am facing an issue where the watermark value is being submitted as the textbox's value in Internet Explorer 9. How can I resolve this problem? Intere ...

No feedback received from JSON

Hi, I'm having trouble receiving JSON response using JavaScript. My goal is to display the JSON data as a treeview. index.html: <!DOCTYPE html> <html> <head> <title>JSON VIEW</title> <link href="https:// ...

How wide should the website layout be?

What is the perfect size for a standard portal website? I've seen many sites with widths ranging from 960px to 1000px. ...

Display the tooltip only when the checkbox is disabled in AngularJS

My current setup includes a checkbox that is disabled based on a scope variable in Angular. If the scope variable is true, the checkbox stays disabled. However, if the scope variable is false, the checkbox becomes enabled. I am looking to implement a too ...

Clicking on the icon reveals the current date

I need some help with the input field that displays the calendar date. Currently, I can only click on the input field to show the calendar date. What I actually want is for users to be able to click on a calendar icon to display the calendar date, which sh ...

The code `$(body).css({'background-image':'url'}) is not functioning properly

Is it safe to assume that the .css() method cannot be applied to the body tag? Since it seems to work fine when used on $("#div")... ...

What is the correct method for iterating through this array of objects and eliminating those with either null or empty item.text values?

Currently, I am working with the following Array: const contactInfo = computed(() => { return [ { id: 'address', icon: 'detail/clubLocation', text: `${props.data.contactInfo.address}` ...

Is there a way to set it up so that clicking on a small image will automatically switch to the corresponding larger size image?

For instance, I have 4 small images and 1 main image. When I click on a small image, the main image changes to display that selected picture. I was wondering if there is a specific value to place inside target=""? I prefer to only use HTML/CSS as I am no ...