I'm not positive about this, but I think a recent change to dev channel chrome has made the buttons' text wrap sometimes, making them look pretty bad. They still look good in FF, and i'm almost positive they were fine before in chrome. This could also be a chrome bug.

For me, this fixed it:

.zocial { whitespace: no-wrap; }

On the sample page, most of the icon+text buttons mention the name of the service or network, but some of the icon-only ones aren't recognisable if you don't already use them. Could those buttons have a title attribute that indicate what they are for? e.g.

<a href="#" class="zocial icon yelp" title="Yelp"><span>Write a review on Yelp</span></a>

If I have a color set on the a:hover element before the zocial style rules take place, Zocial will not override this and instead use the previously defined color on hover.

For example, if I had this in my stylesheet:

a:hover { color: orange; }

Hovering over a button with white text will change the text to orange. This looks very ugly, and so a default hover state color for a link will .zocial should be defined.

As I understand this you are the original author of these fonts(?). Still, there is an Adobe copyright in the ttf metadata. Why is this? In particular, is it clear that Adobe does not have any license restrictions on this font?

Request to add icon for WOT (Web of Trust).

It would be great if Buffer (http://bufferapp.com) was added to this awesome array of icons.

I just downloaded the files and uploaded to a test server.

But i can't see any icons on buttons, on chrome nothing appear and on firefox the code from css file appear.

http://d.pr/i/n2FO

What i am doing wrong? i checked the paths to the fonts, all are correct. I have no idea why couldn't work.

Can be a server issue?

I am using this in an application built in Ruby on Rails 3.2.1 I have been finding it difficult to integrate as the I am unable to show the logo on the left side of the button but instead it shows the unicode. your help will be appreciable.

After using the Social buttons in a couple recent projects and using Bower as a package manager to help me keep my Javascript and libraries organized, I believe that it would be nice to have Zocial included in the Bower Registry.

All that is needed is a components.json file in the root of samcollins/css-social-buttons which would include:

{
  "name": "Zocial",
  "version": "1.0.0",
  "main": ["./css/zocial.css"]
}

and then a simple command to register with Bower's Registry: bower register zocial git://github.com/samcollins/css-social-buttons.

Afterwords, adding a simple message to the README.md stating that you can also install (basically download) Zocial CSS Social Buttons via Bower Package Manager.

Thanks for your hard work as well!

I've been driving myself crazy trying to grok this! Please help!

The readme says 44 buttons, while http://zocial.smcllns.com/ says 42 buttons, and the sample page only shows 66 buttons. There are currently 67 buttons - I'd hate to think people were saying "Meh, only 44 buttons, I'll not bother..." ;-)

Hi,

Since you've got a BitBucket icon. Maybe it'd be good to add a BitBucket icon for people who use that service?

(feels so bad talking about bitbucket here on github)

Great job!
I'd like to see BrowserID support as well. ( browserid.org )

It would be cool if an untappd icon were added! Thanks for the awesome work on this.

Nicole

I noticed that you have a Read it Later icon, but it would be even better if you could you add the updated Pocket (http://getpocket.com) icon.

Hey,
What happened to the private unicode chars that were present on every single icon?
I know that there are some icons that still use 'em, but they're very few, and not the main ones.

Thanks

Would be nice to have an About.me (https://about.me/) icon.

I've installed everything per your specifications, but the result is always this: http://cl.ly/image/462O411G2h2m

Any ideas?

I think this is a great project and I'd like to add it to CDNJS (http://cdnjs.com, https://github.com/cdnjs/cdnjs). Doing this would require a version number, though—would you consider adding a tag? A minified version of the CSS would be great too.

Hi,

the people over at fontello added new github logos to the mfglabs font: https://github.com/fontello/mfglabs.font/tree/master/src/svg

Can you maybe add these too?

Best,
keep up the good work
Bernhard

The current icon for GitHub is nice, but it would be great to have an icon that includes GitHub's "octocat" (as seen in the favicon of this website). Perhaps the octocat icon could become the new GitHub icon, and the old GitHub icon could become an icon simply for Git.

Can the two sections, currently with the header Button icon and main button area by made alphabetical?

They currently seem to be in a random order, but having them alphabetical will allow users to see at a glance if their favourite social network is supported without having to check through the whole list extremely carefully.

e.g.

.zocial.amazon > span:before {content: "a";}
.zocial.android > span:before {content: "&";}
.zocial.aol > span:before {content: "\"";}
.zocial.appstore > span:before {content: "A";}
.zocial.bitcoin > span:before {content: "2"; color: #f7931a !important;}
.zocial.blogger > span:before {content: "B";}
.zocial.call > span:before {content: "7";}
.zocial.disqus > span:before {content: "Q";}
.zocial.dribbble > span:before {content: "D";}
...

When adding an icon class to the row with regular extended buttons a height issue comes into play. In the screenshot below I removed the overview which revels the elongated text beneath the button. Would wrapping the other text in a span or other element be a viable solution to this.

Hi, can you please add support for Bitbucket or can you provide with a guide how to add new ones

Thanks

Hello,

It would be great to have Yandex icon.

http://company.yandex.com.tr/general_info/logotype.xml

Thank you for the project by the way..

Elif

Hello,

Saw other social icons using lkd.to as an icon and I'd like to add it to my site using zocial.

Think you could add lkd.to?

37signals
justintv
readability
box
tripit
500px

One other icon that I realize is missing-- one for Y! Combinator Hacker News

http://news.ycombinator.com/

You've currently got a mixture of upper and lowercase hex colour codes in your CSS - please can these be standardised?

Preferably to lowercase - no shift key needed, all other values within CSS are lowercase (ideally including url() paths), several popular standards like WordPress use lowercase, doesn't feel like "shouting", etc.

Steam now offers login with steam, which would especially appeal to gaming community sites.

Hey,

First, thanks for all the great buttons. Second, have you considered to add a app.net button?

Cheers,
Simon

Currently there are two named colours (green and blue).

These are both inconsistent with all of the other hex colours, and take up either the same or more bytes than their hex equivalents.

Firefox don't allow including fonts cross domain. You can set the CORS header Access-Control-Allow-Origin but you aren't allowed to add header everywhere.

Easiest way of solving this problem is to include the fonts in the CSS file base64 encoded.

What do you say @SamCollins about this?

Request to add icon for LEGO, as seen here:

Wondering if you could create a Status.net icon to add to the collection. You can get the source images here: http://status.net/wiki/SpreadStatusNet/Badges

This project is awesome. Thanks Sam! I'd love support for a Yahoo button as well. E.g. for users who are connecting their Yahoo mail address book.

Wondering if you could create a Drupal icon to add to the collection. You can get the source images (which are GPL) here: http://drupal.org/node/9068

Hi guys,
Could you please kindly add "QQ" in this CSS.

QQ is the largest and most important social soft in China. See:http://www.tencent.com/en-us/index.shtml.

The image is:
http://upload.holaba.com.cn/upload/200905/200905310345232592847_b.png

Thank you very much!

Most CSS minifiers will strip comments, but some will keep ones that with a !. I'd suggest amending the top block of credit/attribution comments into one block and adding a ! at the start:

/*!
Code written by Sam Collins (@smcllns) of www.eventasaur.us
You are free to use this work commercially.
You are free to extend this work without permissions from the author (just do so tastefully eh?).
Enjoy.
*/

This should ensure that if your CSS gets dropped into another style sheet, that the credit is still maintained (in at least a few more circumstances than it would right now).

Hey,
I've created a repo with the Zocial buttons but in LESS.
Here it is: https://github.com/gustavohenke/zocial-less

Thanks in advance, hope it will be useful for someone.

It would also be great to have an identi.ca icon.

Thanks a ton!
Nicole

Hi Sam,

Im testing your the asssssome "css socia"l in IE8 and apparently ... the custom font not loaded proper or something like this ... can you give a try ??

NOTE: im currenlty using webfonts in other pages in IE8 and works fine with these ...

According this paper :

http://caniuse.com/#feat=fontface

it have a partial support ...

thks, once for this excelent work !

Hey Sam,

This is not an issue but rather just a note for everyone. I was trying to get your icons working in IE7 (I know - I hate it too!) And I came across this stackoverflow question which helped:

http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7

Basically, you just need to add

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

and the icons will now work in IE7 - not sure about IE6 but I draw the line at IE7 :)

Request to add an icon for Cubby, a file syncing service similar to Dropbox.

Request to add icon for DoYouBuzz

Thanks for putting this project out in the community-- its perfect for something I'm getting ready to implement on my blog!

One icon I noticed you are missing that I think is important for developers is a Stackoverflow icon. Whether you are someone who answers a lot of questions on SO, or just have your online resume posted on careers.stackoverflow.com, I think its a pretty important site for developers. Would you mind adding a SO icon? I'd greatly appreciate it!

Are you planning to select and state a license for the project?

There's at least 3 instances of #ff0000 that have not been shortened down to #f00.

This is for translators: http://www.proz.com/

Seems to be an extra space on one of the rulesets, compared to all the others:

.zocial.paypal { background: #ff921d;
----------------^