Luis Valdez Luis Valdez - 2 months ago 22
CSS Question

FontAwesome icons not showing. Why?

Recently I've been developing this website and I'm trying to put a font awesome icons in it, so it's scalable.

The thing is they are not showing up.

Look at the HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>


or

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>


I did put the stylesheet reference in the head.

I don't know why they aren't showing up.

Here is the reference:

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


Alright, here is the full html:

<head>
<meta charset="UTF-8">
<title>Retrica</title>
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<link href="style/normalize.css" rel="stylesheet" type="text/css">
<link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
<header class="top-header">
<div class="container"><!-- Start Container -->
<div class="row"><!-- Start Row -->
<div class="span3"><!-- Start Span3 -->
<div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
</div><!-- End Span3 -->
<div class="span9"><!-- Start Span9 -->
<nav class="main-nav"> <!-- Start Nav -->

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
<ul class="nav-ul"> <!-- Start Unordered List -->
<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
<li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

</ul> <!-- End Unordered List -->
</nav><!-- End Nav -->
</div><!-- End Span9 -->
</div><!-- End Row -->
</div><!-- End Container -->
</header>

<section>

<h1>The greatest way to contact those you love</h1>
<h3>In a way you don't imagine</h3>

<a href="#" class="btncta">Register Now</a>
</section>

</body>

Answer

Under your reference, you have this:

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

Specifically, the href= part.

However, under your full html is this:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Have you tried replacing src= with href= in your full html to become this?

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

Works for me: http://codepen.io/TheNathanG/pen/xbyFg