CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
Roman Rdgz
Roman Rdgz

Reputation: 13284

Font awesome does not show its icons

Been wondering for a few minutes why Font awesome icons did not appear into my application, but after writing this ultra-simple fiddle, I see that they don't appear at all even with so little code.

I am just loading the CDN and inserting an icon like this:

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

<i class="fa fa-camera-retro fa-5x">This is a camera</i>
<i class="fa fa-icon-remove fa-2x" style="color: red;">This is an X</i>

What am I missing?

Upvotes: 2

Views: 1753

Answers (3)

Sleek Geek
Sleek Geek

Reputation: 4686

A couple of errors.

  1. No fontAwesome Lib
  2. Mistyped icon class

Solution:

Add the link below to the space provided for external resource on fiddle

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Then change

<i class="fa fa-icon-remove fa-2x" style="color: red;">This is an X</i>

To

<i class="fa fa-remove fa-2x" style="color: red;">This is an X</i>

Note: You don't need the word icon between fa and remove.

See it working here

Upvotes: 2

benscabbia
benscabbia

Reputation: 18082

Try this:

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

<i class="fa fa-camera-retro fa-5x">This is a camera</i>
<i class="fa fa-remove fa-2x" style="color: red;">This is an X</i>

Here the fiddle

Upvotes: 5

oshell
oshell

Reputation: 9123

If using jsfiddle you have to add the following link under external resources:

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Or use this in your head section:

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

Your jsfiddle updated.

Upvotes: 1

Related Questions