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.
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.
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"; }
.sass
files. The icons.json
and index.html
icons.json
for a manifest of available icons.rake
updates the index.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.