CSS content property generating an image

Asked

Viewed 693 times

2

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

The section that generates the image is as follows:

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

I couldn’t find anything on Google to explain how this is done, because the F12 I can’t find the image.

The template link is:

http://eco-nature.cmsmasters.net/onepage

These are the social media icons from the footer.

I was curious to know what this is about, because I saw that the content is possible to include an image using the "content: url()"

css css3

  • I edited, because the snippets are obviously to play the problems with CSS/html/js and not to show code, to only show code use Ctrl+K or click on the icon {}

  • Thanks William, is that sometimes I use the stackoverflow in English and have different things. Thanks.

2 answers

3


Icon Fonts

The name of this is called Icon Fonts, it is a technique used to show "icons" more lightly. As you may know, we can resize a font as far as we want it to not lose quality, but this does not happen with images. This made the developers have several images of different sizes for the icons, and often this 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 there, you can display your icons freely, without worrying about the size or quality.

Many sites provide icons in an easy way, so you don’t have to worry about creating them. Examples of these sites are:

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

  • Excellent answer my dear. I just discovered right after I created the question, that are loaded source files and a svg file. If I were to create my fonts icons I would need all this or only svg would solve?

  • It depends. If they are multiple icons you better create a source file equal to the websites I have indicated do. If there are only a few, you can create them in SVG. I’m not sure if you can do "CSS Sprites" with SVG, if you succeed, it will be the best.

1

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.