Font Awesome & Unicode
HtmlCssUnicodeFont AwesomeHtml Problem Overview
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></i>
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.
Html Solutions
Solution 1 - Html
I got a simillary problem using unicode and fontawesome. when i wrote :
font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */
On google chrome, a square appear instead of the icon. The new version of Font Awesome also requires
font-weight: 900;
That's work for me.
From : https://github.com/FortAwesome/Font-Awesome/issues/11946
Hope that's will help.
Solution 2 - Html
It does not work, because <i></i>
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></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.
Solution 3 - Html
You must use the fa
class:
<i class="fa">

</i>
<i class="fa fa-2x">

</i>
Solution 4 - Html
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
Solution 5 - Html
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
Solution 6 - Html
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
Solution 7 - Html
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.
Solution 8 - Html
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
Solution 9 - Html
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';
Solution 10 - Html
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.
Solution 11 - Html
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 ;-
Solution 12 - Html
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:
Solution 13 - Html
For those who are using Font Awesome version 4.7,
css_selector::before{
content:"\f006";
font-family:"fontawesome";
font-weight:900;
}
Solution 14 - Html
Just to add on Jukka K. Korpela answer above, font awesome already defined a css selector "fa". You can simply do <i class="fa"></i>
. The catch here is, fa defines the font-style:normal, if you need italic, you can override like <i class="fa" style="font-style:italic"></i>
Solution 15 - Html
By using css you can add your icon via Unicode
content: '\f144';
font-family: FontAwesome;
This will work
Solution 16 - Html
Add font weight 900..its working for me
font-weight: 900;