CSS content property generating an image

Navigation
2

I was looking at a class of a Wordpress template and saw that it created an image of a facebook logo using CSS content with a string of characters.

The snippet that generates the image is as follows: 

.cmsms-icon-facebook-circled-1:before { content: '\ee2e'; }

I did not find anything in Google that explained to me how this is done, because by F12 I can not find the image.

The template link is:

link

These are the social network icons in the footer.

I was curious to know what it was about, because I saw that content can include an image using "content: url()"

    
asked by anonymous 21.04.2015 / 22:06

2 answers

3

Icon Fonts

The name of this is called Icon Fonts, a technique used to display "icons" more lightly. As you may know, we can resize a font to wherever we want it will not lose quality, but this does not happen with images. This made developers have several different sized images for the icons, and often that was extra weight for the page. The solution? Create icons using fonts!

Instead of having an image (in .png format, for example), you have a common font file with the characters as icons. From here, you can display your icons in a free way, without worrying about size or quality.

Several sites provide icons in an easy way, so you do not have to worry about creating them. Examples of these sites are:

What content does, is to "call" the character representing the icon you want. In the case of your example, \ee2e is the character that represents the Facebook icon.

    
21.04.2015 / 22:30
1

What it is actually using is a font library. See for example these other libraries:

21.04.2015 / 22:15
Why is my radio input returning "on"? Access the data of an Array that receives 2 Arrays