4

I was curious how Imgur was rendering their upvote/downvote arrows:

Imgur upvote/downvote arrows

I assumed they were images, but I found something that I did not expect:

A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters, respectively:

imgur icon-upvote glyph mapped to 'o' character

imgur icon-downvote glyph mapped to 'x' character

content: "x" style disabled

Imgur custom icon font

Is this method considered acceptable these days? I have never considered using a custom font for something that doesn't semantically map into an alphabet. This approach is not even on my radar of best practices for web design.

I can imagine the reasons for:

  • Your site uses a standard icon set that can be mapped to single-character codes.
  • You only need control over foreground/background color for the icons.
  • You want icons that scale the same as text.

I want to know any specific reasons against using this method.

In particular, I'm looking for answers that address any of the following:

  • browser/platform compatibility
  • future maintenance implications
  • semantics
  • performance
  • standards compliance

The only thing I have come up with so far, is that, semantically, it does not make sense to map an upvote icon to the character 'o' and a downvote icon to the character 'x'. And, just to be specific, I'm not talking about keyboard mappings, but rather language mappings, character codes. It seems to me that raster images or SVG are much more preferable alternatives in this case.

I thought of one other possibility: language and encoding compatibility. Would the html lang attribute or character encoding of the page have any effect on the character mappings into the font in the CSS stylesheet (the stylesheet uses 'x' to represent a downvote icon)?

However, I'm certain Imgur has thought all of this through already. So, why am I wrong?

Parker
  • 7,244
  • 12
  • 70
  • 92
  • 1
    https://css-tricks.com/html-for-icon-font-usage/ https://css-tricks.com/svg-sprites-use-better-icon-fonts/ maybe this two articles can help you a little. Font icons are very popular these days (example: http://github.com). – max Nov 16 '15 at 00:13
  • 1
    @makshh Thank you - these snippets from your first link are noteworthy: *"It almost never makes sense for an icon to be mapped to a letter."* Also: *"Even better, I like the idea of mapping icons to the 'Private Use Area' of Unicode. As I understand it, this is exactly why it exists, to use for your own special characters. Mapped this way, you're in no danger of the character being spoken by a screen reader."* – Parker Nov 16 '15 at 12:16
  • 1
    @makshh From the second link: *"Weird failures: Icon fonts seem to fail in weird ways. For instance, you map the characters to normal letters, then the font loading fails and you get random characters abound. Or you map to 'Private Use Area' and some browsers decide to re-map them to really weird characters like roses, but it's hard to replicate. Or you want to host the @ font-face files on a CDN, but that's cross-origin and Firefox hates that, so you need your server to serve the right cross-origin headers, but your Nginx setup isn't picking that up right. SVG wins this one."* – Parker Nov 16 '15 at 12:57

3 Answers3

2

Modern browsers (e.g. IE9 above) support custom fonts.

Even Bootstrap also uses custom fonts for icons, known as Glyphicons! It is a nice way to beautify the websites icons without having to do it from Photoshop as an image which may cause responsive issues.

They are usually used by calling the class name which links to the CSS that call the icons from the font family. Html lang would not have any issues with it.

cweitat
  • 1,199
  • 1
  • 11
  • 28
  • What I'm getting at is the character encoding for the page and browser fallbacks (quirks mode): UTF-8, ISO 8859-1, windows-1252. Single-character mappings into the font could change depending on the code page, right? For instance, characters in the 128-255 range (e.g., Euro symbol) [differ](http://www.i18nqa.com/debug/table-iso8859-1-vs-windows-1252.html) in their mapping of the symbol to the underlying character code. It seems logical that this would carry over to a glyph lookup in the custom font. Consider the case where the font, CSS, and HTML files are served in different code pages. – Parker Nov 16 '15 at 12:37
1

Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.

Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.

To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.

As Mike 'Pomax' Kamermans put it:

"Fonts are for encoding vector graphics that are to be used in typesetting context. That can mean letters, or icons, or emoji"

Keyamoon
  • 1,785
  • 17
  • 16
  • The part that I'm hung up on is "if done right". It looks to me that Imgur is using a method from 2011 described [here](https://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes), which seems to break semantics of both HTML and CSS. In particular, these two parts: *"This can be alleviated by wrapping the text label in a tag (I like to use rather than , due to the fact that it’s smaller..."* and `Favourites`. – Parker Nov 16 '15 at 12:19
  • A "meaningful character code" could be difficult to define. A single character could have mappings to different glyphs depending on the code page it is being served as. – Parker Nov 16 '15 at 12:50
  • 1
    An accessibility/wheelchair icon assigned to "0x267f" as defined in http://www.unicode.org/charts/PDF/U2600.pdf would have the same meaning everywhere. You could use the font as simply as just ♿. I think this would be a right way of using icon fonts. – Keyamoon Nov 16 '15 at 13:21
  • 1
    That is a great example that lends support for preserving the semantic value of every glyph by directly invoking some character code in the specific encoding that is set for the page (i.e., even if the font does not have a glyph for the character code, the code still maps to the Unicode standard). This mitigates the problem of using the same encoding on all resources involved in rendering that glyph (font, CSS, HTML). This would also mean that mapping a wheelchair glyph via an unrelated symbol, e.g., the number '6', even if it rendered properly would lose the semantic value. – Parker Nov 16 '15 at 14:52
1

One big reason is accessibility. There are many browser extensions which swap out a website's font for one that's more legible for people with different visual impairments. If you use fonts for your icons, these will be swapped out too, leaving your user looking at whatever string you placed in for your icons.

suryanaga
  • 3,728
  • 11
  • 36
  • 47
  • Those extensions wouldn't swap emojis or Unicode arrow or heart symbols, would they? They shouldn't; it would be a bug. – Keyamoon Nov 17 '15 at 17:32
  • Well the font that they use might not support those characters. – suryanaga Nov 17 '15 at 19:59
  • If a font doesn't support certain characters, it shouldn't be used for displaying those characters. It should instead fallback to a system font. Similar to how we can specify a code range for our custom fonts in @font-face rules in CSS. – Keyamoon Nov 18 '15 at 00:46