I installed the icon font https://materialdesignicons.com on my Antergos installation, but it doesn't seem to render. Running fc-list shows it on the list of installed fonts. I can even use gucharmap and see the glyphs. But trying to display them to copy shows nothing or strange caracters, as seen here: gucharmap What could be wrong?

  • You did select the font where you tried to use the icons, right? – Daniel B Jan 10 '17 at 22:15
  • @DanielB Yes, of course – José María Jan 10 '17 at 22:18

I read your question again: There seems to be a misconception of how font icons work.

So, how do they not work? Using copy/paste and nothing but.

How do they work? It’s a special font that doesn’t have regular character glyphs. So when you type A, you may actually get a Microsoft Access icon or whatever.

Let’s take for example Font Awesome. It’s made for use on the web and comes with CSS styles. For example, when you use the Amazon icon, the following CSS class is used:

.fa-amazon::before {
    content: "\f270";

So it’s using the character at code point 0xF270. When you try to view this character in another font, you’ll most likely see nothing or a placeholder:

According to unicode-table.com this code point is located in the so-called Private Use Area. There are no standardized characters there.

Only when the font used to display this character is Font Awesome will you see the Amazon icon.

All this also applies to the font you have. The “text to copy” field does not use the icon font to display the character, so you will never see the selected icon there. Instead, you will see what appears to be “garbage text”.

Here’s the CSS class for the Ethernet icon:

.mdi-ethernet:before {
  content: "\F200";

How to use the font elsewhere? You’d open LibreOffice Writer or whatever, and paste the “garbage text” there. Now you need to select the pasted text and change its font to the icon font, which should appear in the font selection like any other font. Only then will you see the desired icon.

enter image description here

  • But I'm trying to use them on polybar for i3wm on Arch. Also even if I have them installed I can't see them at dotfiles on GitHub – José María Jan 12 '17 at 15:34
  • Luckily, with polybar, you can mix fonts. I’m not sure what you’re trying to say by “Also even if I have them installed I can't see them at dotfiles on GitHub”. – Daniel B Jan 12 '17 at 15:39
  • This file is using Material Icons Font: github.com/not7CD/dotfiles/blob/master/polybar/.config/polybar/… I have the font installed on my system, but I can't see the icons on that file. – José María Jan 12 '17 at 15:41
  • I see. That’s a much more specific problem that should probably go in a new question. You might also want to look at polybar’s output, with increased verbosity. // Also, you won’t see them in your browser when viewing this file, because GitHub is not telling your browser to use the font. – Daniel B Jan 12 '17 at 15:46

The problem was the font Adobe Blank that was installed on my system (don't know why). From Adobe itself:

Adobe Blank is a special-purpose OpenType font that is intended to render all Unicode code points using non-spacing and non-marking glyphs. [...] it serves the following two purposes:

  • Invoking this font, as a temporary measure, prevents OS- or application-level font-fallback from kicking in before the intended font can be rendered.
  • Related to the above, using the font allows one to detect when a web font is actually loaded, which is arguably a hack to overcome a limitation in CSS.

Disabled this font and everything is working perfectly. Maybe it's not the best solution, but it is the best solution I have for now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.