Codes316 Codes316 - 7 months ago 12
HTML Question

Font Awesome Icons do not display correctly across browsers

I used some icons placed in my footer from font awesome that link to other pages. The icons load fine on my local server and they load fine on my codepen. However, the icons do not appear on internet explorer and my entire footer disappears from google chrome. What would cause this?

Here is the link to the codepen:
Here is the actual website:

The HTML Code:

<link rel="stylesheet" href="filepath/font-awesome-4.6.3%202/css/font-awesome.min.css">

<div class="row">
<div class="icons">
<ul class="social">
<li><a href="" class="button social"><i class="fa fa-fw fa-linkedin"></i></a></li>
<li><a href="" class="button social"><i class="fa fa-fw fa-github"></i></a></li>
<li><a href="" class="button social"><i class="fa fa-fw fa-codepen"></i></a></li>


Could it be that your local version of font-awesome has some issues? Try using the CDN link instead.

Here's a helpful link to troubleshooting page on the Github repository of font awesome: Font awesome troubleshooting


Error in the question owner's case:

<link rel="stylesheet" href="filepath/font-awesome-4.6.3%202/css/font-awesome.min.css">

The reference to the question owner's copy of 'font-awesome.min.css' is malformed and has file path issues.


Option 1: Make sure your reference file path is formed correctly and points to a valid copy of 'font-awesome.min.css'.

Option 2: Use a version provided by the CDN like so

<link rel="stylesheet" href="">