CODEWITHSUNDEEP
htmlcss
System.Data
System.Data

Reputation: 3968

Using content to represent icons using CSS pseudo elements

I just stumbled upon the following CodePen: http://codepen.io/html5web/pen/enlAc. At the end of the source, you will find the following lines of code:

.twitter:before {
  content:"\F021";
}
.in:before {
  content:"\F022";
}
.vimeo:before{
  content:"\F024"; 
}

Interestingly, the magic values of the content property causes to show an icon. I can't understand how and where the values came from and why this works. How is this possible?

Upvotes: 0

Views: 1286

Answers (2)

Ennui
Ennui

Reputation: 10190

It's the CSS hex value for a particular character. That does not create the icon - they are using an icon font that assigns various icons to specific decimal/ascii character values. Just google "icon fonts" and you'll find plenty of info about this.

Reference:

  1. http://css-tricks.com/css-content/
  2. http://css-tricks.com/snippets/html/glyphs/
  3. http://www.evotech.net/articles/testjsentities.html (converts ASCII to CSS Hex value)

Also, :before and :after are psuedo-elements, not pseudo-classes.

Upvotes: 2

BetaBlaze
BetaBlaze

Reputation: 177

This is possible because of the font file. The content provided are characters inside the font which lead to an icon.

Upvotes: 0

Related Questions