Search code examples
csswordpressfavicon

Using content property to get favicon?

I'm editing the CSS of a WordPress theme in order to make it fit my needs better. I've come across what, as far as I can tell, retrieves the favicon for different social media sites. 

.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }

I follow that it looks for flickr.com in the url I provide, but what's the content property doing? How could I change the content field to support another site, such as StackOverflow?

Solution

  • Like @Paulie_D said, icon fonts.

    The content property is pointing to a Unicode character in a icon font set. The CSS selector is prependnig the icon (via pseudo element) to an anchor element <a> that has a link that contains flickr.com.

    This might be a coincidence but the current version of FontAwesome uses the same unicode character \f16e for Flickr.

    As far as "supporting other sites, such as StackOverflow," you'll be at the mercy of the icon font. What ever the icon font provides is what you can use.

    If the site is indeed using FontAweseom then you'll have quite a few icon options available to you, including StackOverflow \f16c. Here is a list of all the FontAwesome Icons.