Font Awesome 5 Unicode

Font Awesome & Unicode

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.

Font Awesome 5 unicode

^{If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version}

The difference between the regular and the solid version is the font-weight. You simply need to adjust this one to swap between both version:

input.star:checked ~ label.star:before {  content: '\f005';  color: #e74c3c;  transition: all .25s;  font-family: 'Font Awesome 5 Free';  font-weight: 900;}
label.star:before {  content: '\f005';  font-family: 'Font Awesome 5 Free';  font-weight: 200;}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<input type="checkbox" class="star"><label class="star"></label>

how to get unicode for font awesome icon 5?

You could download and parse the icons.json file from the public repo of FontAwesome. Then, you upload it into your application, and make an utility which searchs for the unicode of the selected icon.

I include in this answer a short example of how you could make it work.

function getIconUnicode(iconName) {
  const fontAwesomeSource = {
    "500px": { "unicode": "f26e" },
    "accessible-icon": { "unicode": "f368" }
    ...
  };

  // if iconName is in the format of "fas fa-address-book"
  // it should be parsed in order to reflect the name present in the JSON

  const selectedIcon = iconName.split(' ')[1].split('-').splice(1).join('-');

  const unicodeValue = fontAwesomeSource[selectedIcon].unicode;

  return unicodeValue;
}

// example taken from the GitHub repo of the plugin
$('.my').on('iconpickerSelected', function(event){
  console.log(getIconUnicode(event.iconpickerValue));
});

Font Awesome 5 icon in stylesheet showing up with unicode

While the JavaScript version of FontAwesome supports pseudo-classes, they're not recommended:

Sample Image

As such, you should either use the CSS version:

.accordion:after {  content: "\f0d7";  color: #9E3E39;  font-weight: bold;  float: right;  font-size: 15px;  /*margin-left: 5px;*/  /*margin-top: -80px;*/  font-family: FontAwesome;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><div class="accordion">Accordion</div>

Font-awesome unicode not working for version 5.11.2

.toggle::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
}

Use double colons for using before.

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

FontAwesome 5 Unicode Support with inline font css

This doesn't really have anything to do with FontAwesome.

When specifying font, you are required to include at least font-size (which must be a size in this situation, not initial, inherit, or unset) and font-family.

From MDN:

If font is specified as a shorthand for several font-related properties, then:

it must include values for:

<font-size>

<font-family>

it may optionally include values for:

<font-style>

<font-variant>

<font-weight>

<line-height>

font-style, font-variant and font-weight must precede font-size

font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps

line-height must immediately follow font-size, preceded by "/", like this: "16px/3"

font-family must be the last value specified.

Also note that, if you do leave out optional values, the default normal is used in their place, overriding values set previously.

Try instead:

.calendar::before {  font-family: "Font Awesome 5 Free";  /* updated font-family */  font-weight: 400; /* regular style/weight */  content: "\f133";}
.calendar2::before {  font: 400 16px "Font Awesome 5 Free";  /* updated font-family */  content: "\f133";}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/><div class="calendar"></div>
<div class="calendar2"></div>

Font Awesome 5 Some bad Unicode characters

I assume you don't have a pro license.

To use the regular theme for the chart-pie you need the pro license, for the regular version of the id card you don't.

<i class="far fa-id-card"></i>
<i class="fas fa-chart-pie"></i>

Just look on the official font awesome site at https://fontawesome.com/icons and then see if you can choose regular from the menu on the right. Some icons don't have this option for free. There you need to use the "fas" css class and not the "far" class.