Include icons in CSS

[billerickson]

The one thing that always bugs me is having to change out the icon classes so they show up. We shouldn't assume every site has Font Awesome equeued.

Given that we're already loading a CSS file, and the number of icons needed are so few, I recommend we include the icons in our CSS file.

My preferred method would be to use icomoon to generate a custom icon font, then use our own prefixes (ex: easc-twitter) so that they don't conflict with existing styles.

If your theme had Font Awesome installed, the class will change and the new icon font will also load, but the look of the icon will be the same. If your theme wasn't using Font Awesome and you changed the class name using the filters, there won't be any noticeable change (your custom class name will still be used).

There's only two instances I can think of where something will go wrong:

1. You're directly styling the icon using its class name ( .fa-twitter), which is unlikely.
2. You've disabled CSS using the filter and are loading Font Awesome in your theme. In this case the class will change but you won't be loading the new icon font.

Jared, do either of these apply to sites you've built? If so, are you able to update those sites prior to us pushing out this update (if we choose to do so)?

I think it's a pretty important feature, especially if we plan to ever release the plugin. Everything works out of the box now EXCEPT the social service icons.

[jaredatch]

I agree and I think we discussed this in the past. I run into scenarios where I want to use the plugin but the client isn't using FA (or any icon-font for that matter) and then its inconvenient.

I think cherry picking those X number of icons we need and wrapping them up in a tiny font is a good solution and is what I had in mind. If anything it's way better than loading all of FA (100kb) just for the social icons, which is what I do occasionally when I am in a hurry or in a bind.

I'm only using the updatable-version of the plugin on 1 or 2 clients, neither if which are using a custom implementation or disabling the CSS. Even if their is an issue it should be an easy fix. One issue I thought of that would be more practical for one of my clients to encounter would be if in my own CSS I was running tweaks targeting .fa items - but I'm willing to deal with that if it happens.

I think we should create a single wiki page that contains 2 lists - each of our sites/clients that are using the plugin, so we have it as a reference in the future if needed.