This project is now no longer maintained in favor of its successor, https://github.com/rstacruz/iconfonts.
Sass 3.2 integration for modern icon webfonts.
- Elusive - 271 icons, Aristeides Stathopoulos, SIL license, native at ?px
- Entypo v2.0 - 241 icons, Daniel Bruce, SIL license, native at 40px
- Entypo Social v2.0 - 46 icons
- Font Awesome v4.0.3 - 249+ icons, Dave Gandy, CC BY 3.0, native at 14px
- Typicons - 88 icons, Stephen Hutchings, CC BY-SA 3.0, native at 24px
- Foundation Icons v2 - General set icons, ZURB, MIT Open Source License, native at ?px
The Sass/CSS files that these fonts provide usually give you a lot of cruft, and defines all the classes in one giant file.
Me, I prefer to not have them in my CSS files unless I need them.
First, include the font-face definition somewhere like so:
@import font-awesome
+fa-font
Then use the *-icon
mixin:
button.add
+fa-icon(plus, 24px)
Each of the files provides a *-icon
mixin:
+fa-icon(music)
+fa-icon(music, 24px) /* 24px size */
It also accepts some keyed arguments. You can mix and match these together.
+fa-icon(music, 24px, $color: #333)
+fa-icon(music, 24px, $margin: 3px) /* Margin-right */
+fa-icon(music, 24px, $shadow: 0 1px 1px rgba(black, 0.2)) /* Text shadow */
You may also specify a $top
value to compensate for any mis-alignment.
This nudges the icon by that many pixels from the top.
+fa-icon(music, 24px, $top: 2px)
See the individual files for more info.
- So that you define icons in your CSS, not in your HTML.
- So that your CSS becomes leaner by not adding definitions for icons you don't use.
Sass_icon_fonts uses Sass placeholder classes to make sure that you don't get CSS definitions for unneeded buttons. You see, this modest snippet:
button.add
+fa-icon(plus)
button.delete
+fa-icon(trash)
...produces this output CSS below. Note that there isn't anything else here but the two buttons. Compare this with font-awesome's default Sass file :)
button.add:before, button.delete:before {
line-height: 1em;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: none;
vertical-align: middle;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important; }
button.add:before {
content: "\f067"; }
button.delete:before {
content: "\f014"; }
- To contribute, just edit the
.sass
files. Theicons.json
andindex.html
are all auto-generated. - See
icons.json
for a manifest of available icons. - Typing
rake
updates theindex.html
reference.
Files in this repo (Sass stylesheets, build script, reference HTML) all (c) 2013, Rico Sta Cruz and its contributors, all released under the MIT License.
Actual font files are not part of this project, and are available in their respective licenses.