I'm trying to show MaterialIcons on my JavaFx WebBrowser using webEngine, but it just shows the description of the icon. Icons doesn't work also on IE and Safari. Does anyone know how to make it readable?
I also struggle on that one, so for those who are intersted to know, JavaFX is only compatible with MaterialIcons written with numerical character references as James_D stated and not with ligatures format.
So insted of writing : <i class="material-icons">add</i>
You should write : <i class="material-icons"></i>
Here is cheatsheet link for converting Material Icon ligatures to their respective numerical character reference : https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
Related
I use icomoon.io to create and manage my icon fonts. It's excellent and you can set "ligatures" for the text you want to display the icon.
However, I cannot find a sane way to handle missing ligatures to display a default or "missing" icon.
One insane way was I created an icon component and check the text against an array of ligatures. But this would mean that I must maintain the array to match the icons in my font.
everyDangLigature = ['star', 'arrow-up', ...]
iconText = everyDangLigature.includes(str) ? str : 'missing';
IcoMoon wrote me back with
...if you parse the CMAP table of the font, you could check if a glyph
exists by its code point.
Also asked the opentypejs group.
How does one go about parsing the CMAP table of the font?
Is there another way to elegantly handle missing ligatures in our icon fonts?
This question already has answers here:
Font Awesome 5 - why aren't icons like bitcoin, facebook, twitter showing?
(4 answers)
Closed 2 years ago.
Font Awesome has awesome for me for quite a while. However, I noticed that recently there's been a bit of a change and I haven't been successful in adjusting. Specifically, the fa class has been deprecated, according to what I read on the fontawesome site. Now we are supposed to use fab for projects like mine. Unfortunately, fab won't load. fa will still load just fine, but not for all the icons, just some of the icons.
Please see here, upper right corner: https://circularsmc.nationbuilder.com/
Twitter and Facebook are using the old fa class and they are loading.
Instagram is not loading using the new fab class. I tried it again next to it using the old fa class, but that's not working, either. (both are there, right next to each other, for reference).
I'm a bit flummoxed. Any idea what I'm doing wrong? I checked the Support page but it doesn't look like this issue is there.
While using fontawesome, you need to be aware of the different style sheets used by this library.
1-fas for solid
2-far for regular
3-fal for light
4- fab for brand
All of these style sheets beside the original fa style one. So, if your fa icons are working and fab is not, then you have to make sure that you have linked the fab style sheet either by downloading it locally inside your project or adding its cdn link to you html file.
Follow this link to use fontawesome cdn links of any style that you need
I hope this is informative for you
Using Material Icons, a plus icon can be added as follows:
<i class="material-icons">add</i>
The text add is no longer visible. Why does this happen and where does the plus icon come from? I know it's defined in the font file, but how?
If it's due to the word add linked with the plus icon in the font file, then why doesn't the following work in Bootstrap, with its Glyphicons?
<span style="font-family: 'Glyphicons Halflings'">\20ac</span>
EXPLANATION
When you strip all the technical information, the answer is really quite straightforward, the font file incorporates a few tables amongst which:
[MANDATORY] the list of characters
[MANDATORY] the hexadecimal codes of those characters
[OPTIONAL] one or more aliases/alternative names for those characters
The one or more aliases/alternative names are the 'ligatures' you are referring to and reside in the font file.
Essentially, when using a character/icon from a font file with ligatures, we have the option to use
the 'regular' hexadecimal code: <i class="some-font-with-ligatures">&#xxxx;</i>
or the alternative/alias/ligature name: <i class="some-font-with-ligatures">ligature-name or alias</i>
That is probably all the important info for a web designer to know.
EXTRAS
Go to CSS-Tricks: How do ligature icons work... to see usage examples and a brief explanation.
And if you want to mess around with your own icon font files I suggest you start using the IcoMoon APP:
start the APP, select an icon and select 'generate font' (bottom right)
Enable display of ligatures with the 'show ligatures'-button (top left 3rd button)
Material Icons. It is possible in a font to define special glyphs for combinations of characters. An example in English is the glyph æ, which is a combination of a and e. This is called a ligature. Other examples are special renderings of ff, ft and tt. Instead of drawing an f followed by another one, the two glyphs are drawn as a single connected glyph: f f versus ff. What the designers of the Material Icons set did is (ab)using this system to make it easy to use icons.
Let's take a step back for a moment. You'll notice in the usage of the add icon that it is possible to include it by directly using a character code that is mapped, in the font, to the correct icon.
<i class="material-icons"></i>
This refers to Unicode character U+E145, which falls in one of the Private Use Area blocks of the Unicode specification. This means that no character is usually assigned to this position and every font designer is free to put any glyph they want at that position. Google chose to put the add icon at that spot. Thus, this character, with font family Material Icons, will render as a nice icon.
In addition to that, they created a ligature in their font family that says that the combination of characters add should be rendered as the same glyph. When browsers support ligatures in their font rendering engine, this will result in the same output as using  would.
Google documents this very briefly as well.
In a nutshell: both (U+E145) and the string add will render as when using Material Icons.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
As character: <span class="material-icons"></span>.<br>
As ligature: <span class="material-icons">add</span>.
Boostrap and Glyphicons. The Glyphicons font does not define ligatures, but referencing the correct characters definitely does work. This is exactly what Bootstrap does, by setting (for the plus icon from Glyphicons) content: "\002b";. This sets the content of the span it is applied on to the character represented by the escaped code point U+002B, which is the plus sign. The Glyphicons Halflings font family renders this as some sort of icon, just like Material Icons. The only difference is that the icon is represented by a different character.
Why does using \002B in a span not work, you ask? That's because escaping a Unicode character in CSS is different than in HTML. In HTML, you'd use + instead (or € to get the example you have in your question). You can read more about escaping here.
Thus, + (U+002B) renders as and € (U+20AC) renders as when using the Glyphicons Halflings font family. You'll notice that for the Glyphicons, they chose to use characters resembling the icons, whereas Material Icons use special, reserved characters.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="font-family: 'Glyphicons Halflings'">+ €</span>
i'm with some doubts here, i've trying to find a tutorial or example on 'how to' but i can't find any.
I have a good knowledge in css (not professional, but i understand) and when working with some templates or tutorials i've seen some flat icons on the website, when i go to the css class, what i found is something like these: "example:before { content: "\e00a"; }"
I'd like to know how is it done? How can i change it to another icon? Or even, how can i create another 'flat icon' based on the same process?
If anyone can help me, please.
Thanks
You can use the content property for icons for example. \e00a for example refers to this character:
It can be used as the bullet point for list items:
li:before {
content:'\e00a'
padding-right:12px;
}
Some fonts come with characters like the ones found here. You can use those characters like \f042 for example to display the screen contrast symbol. however you will need to download the font first to make use of it. Read more about #font-face here
Use Predefined CSS files like "fontawsome" or "glyphicons" (Google It). And then use their css class like <i class="fa fa-facebook"></i> this will show facebook icon.
You are looking for font icons. This gives you scalable vector icons that can be customized with CSS on size, color, drop-shadow, etc. -- Font Awesome
Here is a great example.
http://fortawesome.github.io/Font-Awesome/icons/
I found the following HTML code
<i data-toggle="tooltip" class="icon-ok-sign" data-original-title="File not detected"></i>
on https://www.virustotal.com/en/file/9d72e0523cc6bd4baa1bd88967aec1402551a5d565703b799ce6be52ec1a7640/analysis/
Why they are using <i>?
How to get path for the "icon-ok-sign" icon?
How can I find out the icon path with the Chrome browser menu item "Inspect Element"?
They are using bootstap as their framework.
Bootstrap includes an icon pack called glyphicons. It's a sprite file, and has these icons in: http://twitter.github.io/bootstrap/base-css.html#icons.
In this site they are using an icon font, the popular Font Awesome.
The icons are in the font, rather than as images, which has many advantages.
The reason they use the i tag, is because Bootstrap decides to use that to represent an icon. Personally I don't really like that – i = italic, but on the other hand, its a purely stylistic tag and isn't really used anyway. (em should be used for emphasis, not i).
The tooltip stuff is also from Bootstrap and the documentation is here.