Escape sequences in css? What does: content: "\f423"; do?

Question

I'm currently trying to figure out how the 404 icon on this site works. It appears to be pure css without an image, but it is done entirely with one element.

After playing with the page in the chrome developers console, I found that the design appears to be related to the css content property on the ::before in the main div, which has the following css properties:

color: #e8e5ce;
content: "\f423";
font-size: 964px;
line-height: 0.6;
overflow: hidden;
position: absolute;
left: 7px;
top: 28px;

Changing all of them but content doesn't do anything to exciting, but altering content in any way removes the 404 pattern.

Searching for "\f423" and "\f423 404" doesn't turn up much. However, I did find this page on "css escape sequences". However, I was unable to replicate this effect on my own using the same html and css. Is this a wordpress feature? Are they somehow importing an image with css? If so, why would they do that in this manner?

Thanks!

Hmm, is your CSS in a separate file? If so, do you declare a `charset` in the CSS file? — Patrick M, Apr 16 '14 at 05:18
http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content/190412#190412 — bjb568, Apr 16 '14 at 06:07
I feel like I should note: You'd think this would show up on a search. Using google incognito it appears this question is ALREADY result #1 for "f423 css" > http://goo.gl/0yT26A — James G., Apr 16 '14 at 06:42

score 4 · Accepted Answer · answered Apr 16 '14 at 05:52

According to the rules for backslash escapes in CSS, "\f423" denotes a string consisting of U+F423 PRIVATE USE CHARACTER-F423. In Unicode, private use characters are “code points whose interpretation is not specified by a character encoding standard and whose use and interpretation may be determined by private agreement among cooperating users”. This means that they aren’t really characters at all but code points that may be assigned to a character (typically, characters that are not yet encoded in Unicode) by a private agreement. For obvious reasons, private use characters should not be used in open information interchange, such as web pages.

Yet, icon font trickery often uses private use characters, together with a font with suitable glyphs in the private use code points. This means that when the specific “private font” is not used, for one reason or another, the private use codepoint will be treated by the browser (or search engine, or other software) in some unspecified manner. It may be ignored, or displayed using some generic symbol.

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

A similar question was asked here Basically it's how, for example, font awesome works :

Actual font icons (FontAwesome, for instance) do involve downloading a specific font and make use of the content property. Here's an example of completely raw FontAwesome in use as a font, turning  ( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2

You can also look at how font awesome is implemented

edited May 23 '17 at 11:58

Community

1
1

answered Apr 16 '14 at 05:20

Paul Bele

1,514
1
11
12

It looks like Wordpress is doing some auto-magical things in the font for you: https://core.trac.wordpress.org/changeset/28005. If you use a browser inspector to change the `content` property, you can see several different glyph-icons just from guessing new numbers; `\f019` is a Mail icon, for example. – Patrick M Apr 16 '14 at 05:21
As far as i know, those are for some icons that wordpress uses them in the admin area, but it's the same idea. – Paul Bele Apr 16 '14 at 05:24

score 0 · Answer 3 · answered Apr 16 '14 at 05:34

0

This shows fonts that support the character... f423/fontsupport.htm

answered Apr 16 '14 at 05:34

Les Ferguson

351
1
6

Escape sequences in css? What does: content: "\f423"; do?

3 Answers3