Iconify CSS

SASS files that makes it super duper easy to add fonts based icons in SASS - No reason to remember the key anymore

Download font icons

You can download this project in either zip or tar formats.

yadi yadi follow me on twitter ... twitter

Usage

The concept is pretty straight forward:
The iconify-[fontname].scss file contains a bunch of classes thats each are a single icon from the font set.

To include a icon to a class use a @extend icon-[name of icon]; to the class in the sass file
Now theres no reason to remember that its the "N" key thats deifne the heart icon :)

the SASSy way

Take the iconify-[fontname].scss and drop it into you /sass/ folder
include it as you would with all other .scss files
Add @include "iconify-[fontname].scss" to you sass file

use the @extend .icon-[iconname] to easy add the icon.
Place it with [class]:before or [class]:after simpel n easy.

style.scss


    @import "iconify-websymbols.scss"; //import the iconset iconify-[fontfacename].scss

    h1:before {
      @extend .icon-cloud; //add the .icon-cloud{} to h1
      font-size:1em;
      margin:-1em 1em 0em 0em;
      color:rgba(255,255,255,.9);
      text-shadow: 0px 0px 5px lightblue;
    }

    h2:after {
      @extend .icon-heart; //add this definition to the .icon-heart{} will be added after the h2
      font-size:1.6em;
      color:pink;
    }

iconify-websymbols.scss

    // Define the font
    // WebSymbolsRegular  http://www.justbenicestudio.com/studio/websymbols/
    @font-face {
      font-family: 'WebSymbolsRegular';
      src: url('../fonts/websymbols/websymbols-regular-webfont.eot');
      src: url('../fonts/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/websymbols/websymbols-regular-webfont.woff') format('woff'),
      url('../fonts/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
      url('../fonts/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    //sets up the base icon
    .icon {
      font-family: WebSymbolsRegular;
      font-size: 16px;
      margin-right: 10px;
      vertical-align: middle;
    }

    //define all the icons & extends the .icon class to safe us some kb.
    .icon-view-portrait { content: "a"; @extend .icon;}
    .icon-view-album    { content: "a"; @extend .icon;}

the generated css file iconify-[fontname].css

iconify-websymbols.css

  //lets get the font icon type
  @font-face {
    font-family: 'WebSymbolsRegular';
    src: url("../fonts/websymbols/websymbols-regular-webfont.eot");
    src: url("../fonts/websymbols/websymbols-regular-webfont.eot?#iefix")
    format("embedded-opentype"), url("../fonts/websymbols/websymbols-regular-webfont.woff") format("woff"),
    url("../fonts/websymbols/websymbols-regular-webfont.ttf") format("truetype"),
    url("../fonts/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular") format("svg");
    font-weight: normal; font-style: normal;
  }

  //a ton of classes generated
  .icon, .icon-heart ..... .icon, .icon-view-portrait, .icon-view-album .....{
    font-family: WebSymbolsRegular;
    font-size: 16px; margin-right: 10px;
    vertical-align: middle;
  }

  //naming the icons to something we can actually remember & use
  .icon-star { content: "R"; }
  .icon-heart { content: "N"; }
  .icon-heart-alt { content: "O"; }

If you wanna use another icon library then you just @import another iconify-[typename].scss file

Icon definition

Every icon is defined with .icon-[name]

    .icon-cloud {
      content: "C"; //the icon
      @extend .icon; //use the basic icon style
    }

Icon names

Icon name	Last Name	Language
1	2	3

Template

//assets
          .icon-view-portrait { content: "a"; @extend .icon;}
          .icon-view-album    { content: "a"; @extend .icon;}
          .icon-image         { content: "I"; @extend .icon;}
          .icon-movie         { content: "M"; @extend .icon;}
          .icon-html          { content: "H"; @extend .icon;}
          .icon-attachment    { content: "A"; @extend .icon;}
          .icon-folder        { content: "F"; @extend .icon;}
          .icon-cloud         { content: "C"; @extend .icon;}
          .icon-mail          { content: "@"; @extend .icon;}
          .icon-terminal      { content: "_"; @extend .icon;}

//user
          .icon-user          { content: "U"; @extend .icon;}
          .icon-logout        { content: "X"; @extend .icon;}
          .icon-lock          { content: "x"; @extend .icon;}
          .icon-lock-open     { content: "w"; @extend .icon;}

//navigation
          .icon-up            { content: ":"; @extend .icon;}
          .icon-up            { content: ";"; @extend .icon;}
          .icon-prev          { content: "("; @extend .icon;}
          .icon-next          { content: "("; @extend .icon;}
          .icon-prev-alt      { content: "<"; @extend .icon;}
          .icon-next-alt      { content: ">"; @extend .icon;}
          .icon-first         { content: " "; @extend .icon;}
          .icon-last          { content: " "; @extend .icon;}
          .icon-move          { content: "~"; @extend .icon;}
          .icon-close         { content: "×"; @extend .icon;}
          .icon-scale         { content: "&"; @extend .icon;}
          .icon-reload        { content: "*"; @extend .icon;}
          .icon-sync          { content: "V"; @extend .icon;}
          .icon-sort-up       { content: "{"; @extend .icon;}
          .icon-sort-down     { content: "}"; @extend .icon;}
          .icon-fold          { content: "["; @extend .icon;}
          .icon-fold-closed   { content: "]"; @extend .icon;}

//action
          .icon-config        { content: "S"; @extend .icon;}

//messages
          .icon-alert         { content: "W"; @extend .icon;}
          .icon-ok            { content: "/"; @extend .icon;}
          .icon-ok-alt        { content: "."; @extend .icon;}
          .icon-no            { content: "."; @extend .icon;}
          .icon-delete        { content: "'"; @extend .icon;}

//wysiwyg
          .icon-text          { content: "T"; @extend .icon;}
          .icon-indent        { content: "n"; @extend .icon;}
          .icon-outdent       { content: "o"; @extend .icon;}

//lists
          .icon-list          { content: "²"; @extend .icon;}
          .icon-list-bullets  { content: "p"; @extend .icon;}
          .icon-list-numbers  { content: "q"; @extend .icon;}
          .icon-list-images   { content: "³"; @extend .icon;}

//lists
          .icon-star          { content: "R"; @extend .icon;}
          .icon-heart         { content: "N"; @extend .icon;}
          .icon-heart-alt     { content: "O"; @extend .icon;}
          .icon-tag           { content: ","; @extend .icon;}

.icon-link          { content: "K"; @extend .icon;}
          .icon-date          { content: "P"; @extend .icon;}
          .icon-mappin        { content: "?"; @extend .icon;}
          .icon-search        { content: "L"; @extend .icon;}

//comments
          .icon-chat          { content: "c"; @extend .icon;}
          .icon-speach        { content: "d"; @extend .icon;}
          .icon-speach-alt    { content: "d"; @extend .icon;}
          .icon-repost        { content: "J"; @extend .icon;}

//social sites
          .icon-facbook       { content: "f"; @extend .icon;}
          .icon-googleplus    { content: "g"; @extend .icon;}
          .icon-linkedin      { content: "l"; @extend .icon;}
          .icon-rss           { content: "r"; @extend .icon;}
          .icon-skype         { content: "s"; @extend .icon;}
          .icon-tumblr        { content: "k"; @extend .icon;}
          .icon-twitter       { content: "t"; @extend .icon;}
          .icon-vimeo         { content: "m"; @extend .icon;}
          .icon-youtube       { content: "y"; @extend .icon;}

where do the icons come from

You do know that time when Daddy got fontfaced and met mother icon at the bar? ...

use @fontface for getting the icons - its just a font like good old dingbats.

Download icons

The plan is to support as many icon sets as possible - these are on the list:

OFL license:

Websymbols

Commercial:

Pictos
Tipogram
Fico

You can also clone the project with Git by running:

$ git clone git://github.com/mortendk/icon-font-css

get the source code on GitHub : mortendk/icon-font-css