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.

Answer 1

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

Answer 2

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 ;-

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.