heuzef
/
css-social-buttons
Mirror von https://github.com/smcllns/css-social-buttons
1
0
Fork 0
Code Issues 0 Releases 6 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
177 Commits
6 Branches
5.3 MiB
 
 
Branch: messenger
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „messenger“
${ noResults }
 ZIP  TAR.GZ
Sam Collins 783af51c6b Adds messenger, and gitignore vor 5 Jahren
css Adds messenger, and gitignore vor 5 Jahren
site index.html: import from http://zocial.smcllns.com/ vor 9 Jahren
src Adds messenger, and gitignore vor 5 Jahren
templates Adds messenger, and gitignore vor 5 Jahren
.fontcustom-manifest.json Adds messenger, and gitignore vor 5 Jahren
.gitignore Adds messenger, and gitignore vor 5 Jahren
.nojekyll Host sample on gh-pages vor 9 Jahren
CNAME Add CNAME vor 9 Jahren
History.md Release v1.3.0 vor 7 Jahren
LICENSE Add LICENSE file vor 9 Jahren
README.md Add GitLab (#107) vor 7 Jahren
bower.json Remove excess comma in main array vor 9 Jahren
composer.json composer.json: cleanup vor 9 Jahren
fontcustom.yml fontcustom config with comments vor 9 Jahren
index.html index.html: Fix number of icons. s/42/100/ ! vor 9 Jahren
package.json Release v1.3.0 vor 7 Jahren
sample.html Adds messenger, and gitignore vor 5 Jahren

README.md

Zocial CSS social buttons

I basically rewrote this entire set so they are full vector buttons, meaning:

  • @font-face icons
  • custom font file for all social icons
  • icon font use private unicode spaces for accessibility
  • em sizing based on button font-size
  • support for about 83 different services
  • buttons and icons supported
  • no raster images (sweet)
  • works splendidly on any browser supporting @font-face
  • CSS3 degrades gracefully in IE8 and below etc.
  • also includes generic icon-less primary and secondary buttons

Demo

How to use these buttons

<button class="zocial facebook">Button label here</button>

or

<a class="zocial twitter">Button label</a>
  • Can be any element e.g. a, div, button etc.
  • Add class of .zocial
  • Add class for name of service e.g. .dropbox, .twitter, .github
  • Done :-)

Check out zocial.smcllns.com for code examples.

There’s also a LESS version from @gustavohenke here

Problems, questions or requests to @smcllns

CDN

This project is available on CDNJS: https://cdnjs.com/libraries/css-social-buttons

How to contribute

  1. Install Font Custom
  2. Add new font in the src/ folder.
  3. Set color settings in the templates/zocial.css file.
  4. Run fontcustom compile
  5. Update the sample.html file with both the button and icon.
  6. Test rendering. If broken go to step 2.
  7. Send pull-request !

License

Under MIT License

The GitLab logo is derived from this which is released under CC BY-NC-SA 4.0.