How to use Awesome Font?

Question

How to use Awesome Font?

Navigation

#1 by (4 votes)
#2 by (1 votes)

3

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

For example, the template code is this:

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

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

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

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

Help me, please !!!

css

asked by anonymous 05.06.2015 / 05:37

2 answers

Block access to pages containing ".php" with HTACCESS Require that every instance has 2 attributes

score 4 · Answer 1

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

Some of these codes / icons can be seen here: link

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

Do not forget to join:

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

jsFiddle: link

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

score 1 · Answer 2

Be very careful about one thing: FontAwesome version 4 uses those styles% type of% you described. If the code you got to tweak still uses version 3 (which is what it looks like, for "fa fa-heart" ), you have to refer to the full list of icons . In this case, you will always place only one class in the HTML, in the "icon-lock" case.