The iconic font designed for use with OctoberCMS
Many examples re-used from the Twitter Bootstrap documentation.
It's easy to integrate Font Autumn into Twitter Bootstrap, or even use it on its own.
Use this method if integrating with Twitter Bootstrap using LESS
@import "sprites.less"; with @import "font-awesome.less";
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff') format('woff'),
url('../font/fontawesome-webfont.ttf') format('truetype'),
url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
Use this method if integrating with Twitter Bootstrap using CSS.
<head> of your html, reference the location to your font-awesome.css.
<link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/font-awesome.css">
Font Autumn works just as well without Twitter Bootstrap.
Place Font Autumn icons just about anywhere with the <i> tag.
<div style="font-size: 24px;">
<i class="icon-camera-retro"></i> icon-camera-retro
</div>
Increase the icon size by using the icon-large class. This increases the size by 33% relative to the font-size of the container.
<div style="font-size: 24px;">
<i class="icon-camera-retro icon-large"></i> icon-camera-retro
</div>
Font Autumn icons work great in buttons.
<a class="btn" href="#">
<i class="icon-refresh"></i> Refresh</a>
<a class="btn btn-success" href="#">
<i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
<i class="icon-comment"></i> Comment</a>
<a class="btn btn-danger" href="#">
<i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
<i class="icon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-info-sign"></i> More Info</a>
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
Easily replace individual bullets.
<ul class="icons">
<li><i class="icon-ok"></i> Lists</li>
<li><i class="icon-ok"></i> Buttons</li>
<li><i class="icon-ok"></i> Button groups</li>
<li><i class="icon-ok"></i> Navigation</li>
<li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>
Use Font Autumn icons in navigation to provide helpful visual cues.
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
<li><a href="#"><i class="icon-book"></i> Library</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
<li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
</ul>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span>
<input class="span2" type="password" placeholder="Password">
</div>
</form>
Anything you can do with CSS font effects, you can do with Font Autumn.
Star Ratings (inspired by CSS Tricks)