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    lt i class  icon-home  gt  lt  i gt    But  for some reasons  I want to use it in the Unicode way  like    lt i gt  amp  xf015  lt  i gt     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

User · Answer

Add font weight 900  its working for me font-weight  900

User · Answer

By using css you can add your icon via Unicode content    f144   font-family  FontAwesome   This will work

User · Answer

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

User · Answer

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

User · Answer

Just to add on Jukka K  Korpela answer above  font awesome already defined a css selector  fa   You can simply do  lt i class  fa  gt  amp  xf015  lt  i gt    The catch here is  fa defines the font-style normal  if you need italic  you can override like  lt i class  fa  style  font-style italic  gt  amp  xf015  lt  i gt

User · Answer

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

User · Answer

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  lt head gt  lt  head gt  section of your app as shown below

User · Answer

It does not work  because  lt i gt  amp  xf015  lt  i gt  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     lt i class icon-foo gt  amp  xf015  lt  i gt    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   amp  xf015  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

User · Answer

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

User · Answer

You must use the fa class    lt i class  fa  gt      amp  xf000   lt  i gt    lt i class  fa fa-2x  gt      amp  xf000   lt  i gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  -

User · Answer

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 amp feature youtu be

User · Answer

For those who are using Font Awesome version 4 7  css selector  before  content  quot  f006 quot   font-family  quot fontawesome quot   font-weight 900

[html] Font Awesome & Unicode

Examples related to html

Examples related to css

Examples related to unicode

Examples related to font-awesome