Doing More with Icon Fonts

http://stackicons.com

The default CSS included with Stackicons-Social renders a horizontal row of slightly-rounded buttons, each in a single color that reflects the brand (with a lighter variant on :hover).


Adding the .st-multi-color class to the icon or its parent element displays "multi-color" icons (created by stacking pseudo elements). For more than two colors, you'll need to add a non-semantic <span></span> in the markup:

Dribbble
Github

You can override button shapes by adding a class to an icon or its parent container:

.st-shape-square (or .st-shape-r0)
square button shape
.st-shape-rounded1 (or .st-shape-r1)
slightly rounded button (Android)
.st-shape-rounded2 (or .st-shape-r2)
rounded button
.st-shape-rounded3 (or .st-shape-r3)
more rounded button (iOS 7)
.st-shape-circle (or .st-shape-r4)
circular button
.st-shape-icon (or .st-shape-r5)
no button, icon only

It's fairly easy to change icon size, position, and spacing using CSS:

.mynav {
  float: right;
  text-align: right;
  font-size: 115%; }

/* tighter spacing */
.mynav a { margin-left: -.15em; }
  

(Some icons have -alt versions, where the icon differs. A few are just colored differently and get numbered, like .st-icon-email2.)


There's also a .nav-list parent class, which creates a vertical list with text:


The CSS for Stackicons-Social is generated by a group of Sass _partial files. A Sass "construction kit" file allows you to specify a "color style" for single-color icons in the compiled default CSS, and tweak it with variables.

single-color (hover: single-color-hover):

(You can also create this effect using CSS styling. See source.)

single-color (hover: brand-color):

brand-variant (hover: brand-color):

embossed-only (hover: brand-color):

To demonstrate above, I created a few color override classes, which you could @import when building stackicons-social.scss (it's commented-out by default), but it adds a lot of CSS overhead.

Of course, you can tweak however you want in the Sass files. I included these pre-made "color styles" as a convenience. You could also use the icon-only style, and use CSS to create the button background (takes a little tweaking):


Stackicons-Social uses class names to generate different icons. Here's the full list (or see the source code for below). You can also see the complete character set for the font here.

Stackicons-Social

View Stackicons-Social

Hope this helps you get started. I'm sure there will be some revisions along the way. If you'd like to be updated, sign up for emails here, or follow @stackicons.

Other questions? Need a custom icon font for your project, or other work for hire? Email parker@stackicons.com.

Want to support the project? Any amount would be a big help. (As a small token of thanks, I'll send you Stackicons-Social-Complete, with a few more of my own custom icons.)