How to use Font Awesome?

Asked

Viewed 4,989 times

3

I’m using a template that uses Font Awesome icons, so far so good! But when I want to change the icon, I follow the documentation instructions and it doesn’t work!

For example, the template code is this:

<li class="wow fadeInRight">
   <i class="icon-lock">
</li>

If I want to change to the Facebook icon, for example <i class="icon-lock"> for <i class="fa fa-heart"> and I went to see the CSS and it’s like this:

.icon-lock:before {
  content: "\e62a";
}

What does this CSS mean? What is "\e62a" ???

Help me out, please !!!

css

2 answers

4

\e62a is the code (Unicode) corresponding to an icon in that source. That is, the source has a table where each such code corresponds to an icon.

Some of these codes/icons can be seen here: http://astronautweb.co/snippet/font-awesome/

Regarding your specific code you have to reproduce the error to better understand the problem. According to the documentation you should have a union f004.

Don’t forget to join:

.fa-heart:before {
  content: "\xxxx"; /* <- aqui colocas o teu unicode */
}

jsFiddle: http://jsfiddle.net/u36nf717/

If you still have problems do a jsFiddle that reproduces the problem.

  • 1

    +1. I even propose that, after passing the prototype phase, it was ideal to take the <i ...></i> and put these ::before directly in the appropriate styles - the icon is, in a sense, a decorative part of the page, and it makes no sense to pollute HTML with them.

1

Very careful with one thing: the version 4 of Fontawesome uses these styles type "fa fa-heart" that you described. If the code you took to move uses still version 3 (which is what it looks like, by "icon-lock"), you have to consult the names on full list of icons. In this case, you will always put only one class in the HTML, in case class="icon-heart".

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.