2

On a website I saw some interesting elements and inspected them. This is how the element looked like: enter image description here

The CSS definition:

.entry-meta .date a:before {
    content: "\f303";
}

I know images can be embedded using the url property of content but in this case, there is no URL. What is this evil magic?

Sceptical Jule
  • 889
  • 1
  • 8
  • 26

2 Answers2

4

It's just the icon that is not an image but a unicode character.

Font-Awesome uses this also.

See this file:

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
...
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
  • was wondering that myself. (+1 was mine). Your answer is correct. However, the LESS *does* tend to obfuscate the answer. That's some weird looking code to someone who only knows css. – Zach Lysobey Dec 28 '13 at 18:52
  • 1
    @ZachL That's a good point. I updated the answer with real CSS code. Thanks! – Ionică Bizău Dec 28 '13 at 18:55
1

That \f303 is a unicode symbol (just a normal text character). They are likely using a special font like Font-Awesome where all letters/numbers/etc.. are replaced with vector images.

Here's an example using the Font-Awesome library

p:before {
    content: "\f143";
    font-family: 'FontAwesome';
}

See this StackOverflow answer for more info on using Unicode values in your css.

Community
  • 1
  • 1
Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149