How do I add an icon?

HTML-CSS
1

I want to add an icon to my page but for some reason they’re not showing, does anyone know why?

This is my HTML

       <i class="fa fa-3x fa-fire"></i>
        </div>
        <div class="features-link">
          <h1 class="links"> Premium Materials <h1>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
            </div>

And my CSS:

.features-link {
  display: block;
  padding: 20px;
  padding-top: 100px;
  
}

.links {
  margin: 0px 200px;
  text-align: left;
}

h1 {
  font-size: 1.5em;
  font-weight: 600;
  text-align: center;
  display: block;
}

The link to my codepen is: https://codepen.io/marta2804/pen/vYBWKvW?editors=1100

1 Like
2

That is supposed to be your icon? It is empty and there is nothing in your CSS targeting any of those classes or the i element. Either insert an image in your HTML or target the element with CSS and insert an image through that method.

2 Likes
3

I really have no clue on how to add an icon, would you mind typing how you would add it? In the head of the document I have added:

<script src="https://kit.fontawesome.com/yourcode.js">
4

Hi, I don’t know which version of fontawesome you are using but this is the code for the fire icon:

<i class="fas fa-fire"></i>

They made some changes in the last version and you can use only the solid (from here the s in fas) variations of the icons. If you pay you’ll be able to use the regular, light and duotone icons.

1 Like
5

Thank you for your help, really appreciate it! But that’s what I added and for some reason nothing shows up

6

The first class that you put is “fa” not “fas”.
“fa” is deprecated in favour of the ones that specify the type of the icon.
The ones available for free are “fas” (Fontawesome solid) and “fab” (Fontawesome brands).

7

I didn’t notice that. Disregard what I said before. The way I approached it is to just use and <img> and to style it with CSS. Such as here: https://codepen.io/michelz/pen/VoPqGo?editors=1100

8 
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-fire"></i>
</body>
</html>
1 Like
9

Hi, you can also use Friconix. Have a look at this JSFiddle

<html>
  <script defer src="https://friconix.com/cdn/friconix.js"></script>
</html>
<body>
  <i class="fi-xnsuxl-gear"></i>
  <i class="fi-xwsuxl-reload fi-spin"></i>
</body>

Everything is explained on this Quick Starting Guide

1 Like