0

wanted to put a social icons on my site, when looking for some i ran across this site:

A site with a social icons that i want to adapt

enter image description here

then i saw that they are not images:

enter image description here

I don't know that css attribute "content"- what is it?

what is \e006, is it a font? looked at the site resources but didn't see anything related.

and looked for it on google "css content attribute" and "css \e006" But no luck.

E.Meir
  • 2,146
  • 7
  • 34
  • 52

1 Answers1

4

The ::before selector inserts content before the content of the selected class that is .icon-instagram. We use the content property to specify the content to insert. You can only use the content property with pseudo-elements like :after and :before.

In your case, \e006 is a UTF-8 character. What happens is, whenever something has the class .icon-instagram applied to it, it will append this character before it. This is what it means by the pseudo-element :before. It might be a glyphicon. (Instagram icon).

Ali Gajani
  • 14,762
  • 12
  • 59
  • 100
  • Nice, and if i want to add an hover effect to it.. how can it "paint" the icon.. don't it need another set of colored icons? – E.Meir Jun 05 '14 at 23:12
  • The e006 is the Instagram icon. If you use the developer console and edit the CSS in the content, i.e. remove the char, the Instagram icon disappears. You want to paint what, the same icon again? Use the same code. – Ali Gajani Jun 05 '14 at 23:14
  • i mean like in the link i posted, when you hover them they are colored with orange – E.Meir Jun 05 '14 at 23:16
  • I see, okay, well that is another question, but I can tell you: Try utilizing the :hover, so create .icon-instagram:hover { } and add whatever you want it to look like upon the hover. – Ali Gajani Jun 05 '14 at 23:17
  • can you direct me to some question, tutorial on how to paint icons like that? – E.Meir Jun 05 '14 at 23:20
  • I think you can post a new question here on SO giving us directions of what is it that you are trying to achieve. Please close this question, +1 or mark as solve if it helped you understand "content and pseudo-elements" better. Thanks. – Ali Gajani Jun 05 '14 at 23:21
  • thanks, can you please write the question subject that i need to ask here? so i won't get any down vote:) – E.Meir Jun 05 '14 at 23:22
  • Here's a link that will surely help you. http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css – Ali Gajani Jun 05 '14 at 23:24
  • 1
    Thanks, exactly what i have looked:) – E.Meir Jun 05 '14 at 23:25