Eiche fam

I’ve written before about how I’m bundling Font Awesome in my WordPress theme, Cover. I originally just threw in support for the five social networks I link to (Facebook, Twitter, Google+, Github, and CodePen), because it’s my theme, and whatever.

“But Paul,” I hear you say, “how can you have support for social media icons if Cover already comes with Font Awesome?”

Good question. While I am including Font Awesome, which automatically has support for pretty much every social network under the sun, I have also written Cover’s stylesheet in such a way that allows for a custom menu with social network icons.

So yeah, you could do it the hard way and write this in a new menu item’s link text field (this one would make a Facebook icon):

<span class="fa fa-facebook"></span>

But that would require every user to know Font Awesome’s requisite markup, and I think that’s asking too much. You shouldn’t have to know code syntax just to get social media links on your website.

So instead, Cover has two places where you can put what it calls “social menus” — specially created menus that just hold links to your social network accounts. The code in the stylesheet looks like this:

.social-navigation a[href*='facebook.com'] .social-icon:before {
  content: ""
}

Instead of making you write the code to display a Facebook icon, Cover does the work for you. It looks in the social menu, figures out which site you’re linking to, and displays the appropriate icon.

Of course, this CSS magic comes at a price. To include the icons for every social network site that Font Awesome supports, Cover’s stylesheet would gain an additional 100K in size. That’s a little ridiculous. So at first (like I mentioned earlier), I just included the five sites that I use.

But if I intend on Cover being able to be used by anyone (and I do), then I need to support more sites.

I’m far from the first person to use the a[href] selector to add support for social network sites; in fact, I’ve noticed that many of Automattic’s themes do the same thing. They tend to come with icon support for sixteen social networks, so that’s now what I’ve done with Cover, too.