October provides an icon library with icons of various descriptions, based on the popular Font Awesome collection.
Place icons just about anywhere with the <i>
tag or to an existing element using the oc-
prefix.
<i class="icon-camera-retro"></i> icon-camera-retro
<span class="oc-icon-flag-checkered">oc-icon-flag-checkered</span>
To increase icon sizes relative to their container, use the icon-lg
(33% increase), icon-2x
, icon-3x
, icon-4x
, or icon-5x
classes.
<i class="icon-camera-retro icon-5x"></i> icon-5x
<i class="icon-camera-retro icon-4x"></i> icon-4x
<i class="icon-camera-retro icon-3x"></i> icon-3x
<i class="icon-camera-retro icon-2x"></i> icon-2x
<i class="icon-camera-retro icon-lg"></i> icon-lg
Feel free to use them alongside your buttons.
<a class="btn btn-default oc-icon-refresh" href="#">
Refresh
</a>
<a class="btn btn-success oc-icon-shopping" href="#">
Checkout
</a>
<a class="btn btn-primary oc-icon-comment" href="#">
Comment
</a>
<a class="btn btn-danger oc-icon-trash" href="#">
Delete
</a>
<a class="btn btn-default oc-icon-cog" href="#">
Settings
</a>
<a class="btn btn-info oc-icon-info" href="#">
More Info
</a>