Font Awesome & 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>

Get an unicode, not an icon Font Awesome

For some reason, you are missing the fontawesome font itself from your environment.

Checking their website for the font awesome trashcan we can see that they customly disignated the trashcan as codepoint U+F1F8 (instead of using the trashcan emoji U+1F5D1).

If we check for more of their icons we can see that they are mostly in the range of the Private Use Area (U+E000–U+F8FF) in the Basic Multilingual Plane. By definition, no characters are assigned to these codepoints.

This is where font files come in. Font files store glyphs (images) of how to show codepoints. If you define a glyph to a codepoint in the Private Use Area you will have a visual representation of that character. It doesn't matter that other fonts will show you a replacement character or just broken one, when you use the specific font it will work.

So why does the exclamation mark works in any font? Look what codepoint they used for it: U+21
This is of course the codepage of the boring old ! from ASCII/Basic Latin. Any font that respect itself will have this one.

Hope you find this read helpful There are probably lots of ways to include the font in your webpage/machine according to your needs.

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

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

@fortawesome/angular-fontawesome and unicode

Ok, if you inspect your code where you use you new icons, you should see something like that :
Sample Image

That means that you don't have the css way to display FA icons :

.fa, .fas {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
}

So you can't use the unicode trick to display an icon anymore.
Unless, on top of the angular svg FA library, you install the "web" way :
https://fontawesome.com/v5/docs/web/setup/get-started. You will then have a regular font-family that you will be able to use.

Tell me if the part about the SVG makes sense to you if I expressed it correctly.
Cheers.

Font Awesome unicode icon is not working in firefox

I have a workaround, a solution and some reasoning why this is happening...

Workaround: just use any `fa-style on your page.

Example:

https://jsfiddle.net/mbaas/zLapqy3u/

Solution: declare font-face

Add the font-face-declaration from FA's CSS:

@font-face
{
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}

Note that you this code refers to some font-files which you will need to provide as well.

Actually...it would recommend to not call this font FontAwesome, because that could overlap with FA and cause unintended side-effects. Better use a unique name. To be clear:

@font-face
{
font-family: 'FontAwesome_Dilip';
font-style: normal;
font-weight: normal;
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}

and

select {
font-family: '
FontAwesome_Dilip', 'open sans'
}

Also I want to suggest using a specific style for this font-family in preference to applying it to all select-controls.

Possible explanation

It might be some sort of optimization where FF does not bother processing the @font-face-declation from FA-CSS, because it is not used (none of the actual styles from the CSS is referenced.). So then my simple <i class="fa fa-check"></i> fixed it...

Bonus: another advantage of the "private" font-face

As long as you only use yes or no in the select, everything is fine. Try adding the word Keyto your options just to see what's possible (this is an effect which wasn't generally reproducible, but using Chrome I had this very problem. But I'm also using FontAwesome-Font in my Windows-System and I suspect this caused the effect.): you may end up seeing the smybol twice, because "key" is used as a ligature in the font-definition to generate the same symbol. So the advantage of declaring a font-face specifically for that usage is that you can add font-variant-ligatures: none; to the CSS-Style for select to disable ligatures.



Related Topics



Leave a reply



Submit