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!
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.
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/2You can also look at how font awesome is implemented
This shows fonts that support the character…
f423/fontsupport.htm