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.
181 Commits
6 Branches
17 MiB
 
 
Branch: simpler-repo
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „simpler-repo“
${ noResults }
 ZIP  TAR.GZ
Sam Collins 10ccd129a2 Updated Readme vor 5 Jahren
css Adds messenger, and gitignore vor 5 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 Updated Readme vor 5 Jahren
bower.json Remove excess comma in main array vor 9 Jahren
composer.json composer.json: cleanup vor 9 Jahren
demo.html Created simpler demo page vor 5 Jahren
fontcustom.yml fontcustom config with comments vor 9 Jahren
package.json Release v1.3.0 vor 7 Jahren

README.md

Zocial CSS Social Buttons

The idea is to create beautiful social buttons using only CSS, rendering popular social icons as a font, and requiring minimal extra markup.

Benefits

  • Buttons always look sharp at any size and screen resolution.
  • Easily customize the size and call to action of the buttons.
  • Easily localize button text to other languages.

Usage

  1. Can be any element e.g. a, div, button etc.
  2. Add class of .zocial and add class for name of service e.g. .dropbox, .twitter, .github
  3. Optional: Add a class of icon to display as icon instead of button
  4. Optional: Change font size of the element to resize button

There’s also a LESS version from @gustavohenke here

Examples:

<button class="zocial facebook">Sign in with Facebook</button>

or

<a class="zocial twitter">Follow Me</a>

Demo

https://smcllns.github.io/css-social-buttons/

Browser Support

  • custom font file for all social icons works well in any browser supporting @font-face
  • icon font use private unicode spaces for accessibility
  • CSS3 degrades gracefully in IE8 and below

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.