Font Awesome & Unicode

Question

I'm using (the excellent) Font-Awesome in my site, and it's working fine, if I use it this way:

<i class="icon-home"></i>

But (for some reasons) I want to use it in the Unicode way, like:

<i>&#xf015;</i>

(Font Awesome's cheatsheet)

But it doesn't work - the browser shows a square instead.

How do I solve this? The CSS path is correct (as the first way of using Font Awesome works).

Edit: I do have the FontAwesome.otf installed.

I don't have access to all the files now, I just want to know how to use web font with unicode. — matan129, Jun 22 '13 at 19:15

score 89 · Answer 1 · edited Dec 24 '22 at 23:07

89

I got a similar problem using unicode and fontawesome. When I wrote:

font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */

On Google Chrome, a square appears instead of the icon. The new version of Font Awesome also requires

font-weight: 900;

That works for me.

From: https://github.com/FortAwesome/Font-Awesome/issues/11946

edited Dec 24 '22 at 23:07

starball

20,030
7
43
238

answered Aug 25 '18 at 14:54

Basile

1,103
10
16

6

Yep, font-weight is required now. Thanks. – etech Sep 19 '18 at 18:21
6

This saved me. I was missing the font-weight. Thanks Basile! – cbloss793 Jan 30 '19 at 22:17
Font Awesome 5 Now requires font-weight:900 for solid – ottz0 Jan 10 '20 at 00:24
That did the trick! thanks a lot! Really bizarre that some work without and some require the weight.... – AlphaX Oct 24 '20 at 18:20
None of the another changes was not proper for me because I wanted to use it for the `placeholder`. I have had tired to try different changes and only `font-family: 'Font Awesome\ 5 Free'` and `font-weight: 600` changes are really worked! +1 By the way, you should override the other rules with `!important` if you want to use in all inputs. – gurkan Jun 19 '21 at 11:08

Jukka K. Korpela · Accepted Answer · 2013-06-23T01:57:12.403

69

It does not work, because  simply asks the browser to display the Private Use code point U+F015 using an italic typeface. The Font Awesome CSS code has nothing that would affect this. If you add class=icon-home to the tag, you will get the glyph assigned to U+F015 in the FontAwesome font, but you will get it twice, due to the way the Font Awesome trickery works.

To get the glyph just once, you need to use CSS that asks for the use of the FontAwesome font without triggering the rules that add a glyph via generated content. A simple trick is to use a class name that starts with icon- but does not match any of the predefined names in Font Awesome or any name otherwise used in your CSS or JavaScript code. E.g.,

<i class=icon-foo>&#xf015;</i>

Alternatively, use CSS code that sets font-family: FontAwesome and font-style: normal on the i element.

PS. Note that Private Use code points such as U+F015 have, by definition, no interoperable meaning. Consequently, when style sheets are disabled,  will not be displayed as any character; the browser will use its way of communicating the presence of undefined data, such as a small box, possibly containing the code point number.

edited Jun 23 '13 at 01:57

answered Jun 23 '13 at 01:37

Jukka K. Korpela

195,524
37
270
390

4

+1 for the PS. The whole idea of symbol fonts like FontAwesome is, in my opinion, alien to the intended design of Unicode and the Web, and generally harmful. – bobince Jun 23 '13 at 12:59
+1. Does the use of unicode impact performances ? I feel like it could since it wouldn't need to use the pseudo element :before and define the content. – Ced Nov 25 '15 at 02:27
8

With FontAwesome 5, I found that `font-family: FontAwesome;` no longer works. I had to use `font-family: Font Awesome\ 5 Free;` instead. – Tom Warner Dec 12 '17 at 00:11
3

@TomWarner's comment is super helpful. that's the correct way of setting the `font-family`. note - it may also be necessary to set the `font-weight` to something other than normal. in my case I needed to set it to bold for the icon to appear. – aberkow Apr 11 '18 at 19:40
1

@aberkow Thank you for the font-weight tip. I can confirm that it works now. – Jan Zavrel Sep 14 '20 at 11:50

score 43 · Answer 3 · edited Aug 02 '17 at 03:53

43

You must use the fa class:

<i class="fa">
   &#xf000;
</i>

<i class="fa fa-2x">
   &#xf000;
</i>

edited Aug 02 '17 at 03:53

Williem

1,131
1
12
19

answered Mar 23 '14 at 23:38

Behrang

46,888
25
118
160

score 26 · Answer 4 · edited Mar 14 '18 at 05:44

26

For those who may stumble across this post, you need to set

font-family: FontAwesome;

as a property in your CSS selector and then unicode will work fine in CSS

edited Mar 14 '18 at 05:44

Uwe Keim

39,551
56
175
291

answered Mar 31 '16 at 15:34

donnelj

261
3
3

1

In my case, I had to change this to `font-family: Font Awesome 5 Pro; ` – Sølve T. Sep 21 '18 at 10:36
1

Yes, this is for 4.7 version. – Miloslav Milo Janoušek May 31 '19 at 14:13
this is what we all should do ;) thanks ! – Matt Dec 22 '20 at 07:38

score 8 · Answer 5 · answered Aug 24 '18 at 15:48

8

I have found that in Font-Awesome version 5 (free), you have you add: "font-family: Font Awesome\ 5 Free;" only then it seems to be working properly.

This has worked for me :)

I hope some finds this helpful

answered Aug 24 '18 at 15:48

Bmuzammil

81
1
1

Thank you! I checked the Font Awesome CSS and this seemed to be the answer, but there's multiple variants (depending on if a pro license has been bought). This solved the mystery for me. – TomJ Aug 24 '18 at 22:59

score 5 · Answer 6 · answered Nov 21 '18 at 14:40

5

Be sure to load the FontAwesome style before yours.

font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f007";

You can find FontAwesome's explainations here: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

answered Nov 21 '18 at 14:40

Yoann Carrer

67
1
4

score 5 · Answer 7 · answered Jun 19 '19 at 03:53

There are three different font families that I know of that you can choose from and each has its own weight element that needs to be applied:

First

font-family: 'Font Awesome 5 Brands'; content: "\f373";

Second

font-family: 'Font Awesome 5 Free'; content: "\f061"; font-weight: 900;

Third

font-family: 'Font Awesome 5 Pro';

Reference here - https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Hope this helps.

score 2 · Answer 8 · answered Apr 29 '18 at 17:45

I found that this worked

content: "\f2d7" !important;
font-family: FontAwesome !important;

It didn't seem to work without the !important for me.

Here's a tutorial on how to change social icons with Unicodes https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be

score 2 · Answer 9 · answered Apr 23 '19 at 22:11

2

Bear in mind that you may need to include a version number too as you could be using either:

font-family: 'Font Awesome 5 Pro';

or

font-family: 'Font Awesome 5 Free';

answered Apr 23 '19 at 22:11

omarjebari

4,861
3
34
32

score 2 · Answer 10 · answered May 27 '20 at 17:19

In latest 5.13 there's a difference. You do like always...

font-family: "Font Awesome 5 Free";
content: "\f107";

But there's a difference now... Instead of use font-weight: 500; You are following this:

font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f107";

Why is that? I figure out by finding in in .fas class, so you can figure out an updated way by looking into .fas class so you're doing the same as it has to be. Figure out if there's a font-weight and font-family. Here you go guys. That's an update answer for 5.13.

score 1 · Answer 11 · answered Jun 22 '13 at 19:23

1

After reading the answer of davidhund on this page I came up with a solution that your web font isn't loaded correctly that me be a issue of wrong paths.

Here is what he said:

My first guess is that you include the FontAwesome webfont from a different (sub-)domain. So make sure you set the correct headers on those webfont-files: "you'll need to add the Access-Control-Allow-Origin header, whitelisting the domain you're pulling the asset from." https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

And also look at the font-gotchas :)

Hope I am clear and helped you :)

On the same page, f135ta said:

...I fixed the issue by uploading the file "fontawesome-webfont.ttf" to my webserver and installing it like a regular font.. I dont know if its part of the pre-req's for using it anyway, but it works for me ;-

answered Jun 22 '13 at 19:23

Mohammad Areeb Siddiqui

9,795
14
71
113

1

can't be, because my site is still local, just some html. I don't even need to use WAMP/XAMPP in order to check it. And the font IS installed locally – matan129 Jun 22 '13 at 19:28
then what about the paths? are they correct? **double-check** them! – Mohammad Areeb Siddiqui Jun 22 '13 at 19:31
They must be correct, because when I use the font with this way '' it works – matan129 Jun 22 '13 at 19:34
what about you .htaccess? you can put it on your local directories aswell but you need to use a local server like WAMP or XAMPP – Mohammad Areeb Siddiqui Jun 22 '13 at 19:36
1

I'll check it, it may take some time. Thanks for the help! – matan129 Jun 22 '13 at 19:37

score 1 · Answer 12 · answered Mar 14 '18 at 05:41

You can also use the FontAwesome icon with the CSS3 pseudo selector as shown below.

Ensure to set the font-family to FontAwesome as shown below:

table.dataTable thead th.sorting:after {font-family: FontAwesome;}

To get the above working, you must do the following:

Download the FontAwesome css library here FontAwesome v4.7.0
Extract from the zip file and include into your app root folder, the two folders as shown below:
Reference only the css folder in the <head></head> section of your app as shown below:

Pictures of code are not helpful. They can't be copy/pasted. — georgeawg, May 03 '19 at 20:27

score 1 · Answer 13 · answered Sep 28 '20 at 12:21

1

For those who are using Font Awesome version 4.7,

css_selector::before{
content:"\f006";
font-family:"fontawesome";
font-weight:900;
}

answered Sep 28 '20 at 12:21

Naveesh Kumar V

51
2

score 1 · Answer 14 · answered Dec 23 '20 at 10:18

1

Add font weight 900..its working for me

font-weight: 900;

answered Dec 23 '20 at 10:18

sweetnandha cse

705
7
16

score 0 · Answer 15 · answered Jan 16 '14 at 05:15

Just to add on Jukka K. Korpela answer above, font awesome already defined a css selector "fa". You can simply do  . The catch here is, fa defines the font-style:normal, if you need italic, you can override like 

score 0 · Answer 16 · answered Jul 11 '20 at 17:16

0

By using css you can add your icon via Unicode

content: '\f144';
font-family: FontAwesome;

This will work

answered Jul 11 '20 at 17:16

MD SHAYON

7,001
45
38

Font Awesome & Unicode

16 Answers16

Linked