search

parkerbennett / stackicons

Icon font and Sass-based construction kit for Stackicons-Social, which supports multiple button shapes and a unique "multi-color" option in CSS for over 60 social brands.
MIT License
959 stars 117 forks source link

White background #5

Open vogloblinsky opened 10 years ago

vogloblinsky commented 10 years ago

If icon used in a non-white background website, there isn't any background due to icon structure.

parkerbennett commented 10 years ago

I wanted to limit the colors to four to keep the non-semantic s down to one. So, as a cheat I rely on a light background for some icons, e.g., the whites of the eyes in the GitHub octocat. Stackicons-Social has a lot of flexibility, though. If you look through the character set. You could swap out the octocat “face” that has eyes cut out for one that doesn’t so the background doesn’t show through, or you could add an extra and render the silhouette of the octocat in white behind everything.

The colors can be swapped out easily in the SASS-based construction kit files, as well.

If you have a specific icon you need modified let me know and I’ll see if I can help.

Parker

On Mar 4, 2014, at 3:07 pm, vogloblinsky notifications@github.com wrote:

If icon used in a non-white background website, the icons are transparent...

— Reply to this email directly or view it on GitHub.

cognitom commented 10 years ago

How about this approach? @RoelN uses :first-letter and :first-line. https://github.com/RoelN/multicolor-icons-demo/blob/master/skwirrol-icons.css

parkerbennett commented 10 years ago

Yes, I’ve been meaning to check this out more thoroughly, thanks. No IE8 support, but it might be worth it.

On Mar 7, 2014, at 10:29 pm, Tsutomu Kawamura notifications@github.com wrote:

How about this approach? @RoelN uses :first-letter and :first-line. https://github.com/RoelN/multicolor-icons-demo/blob/master/skwirrol-icons.css

— Reply to this email directly or view it on GitHub.

RoelN commented 10 years ago

IE8 support is just a matter of falling back to EOT. It's not included in my demo, but can be simply done by adding it to the code>@font-face</code rule!