2013-05-03 00:12:33 +00:00
< section id = "examples" >
2013-05-06 03:46:56 +00:00
< div class = "row stripe-ad" >
2013-05-03 14:41:31 +00:00
< div class = "span8" >
2013-05-06 03:46:56 +00:00
< p class = "lead" >
2013-05-06 04:10:16 +00:00
After you < a href = "{{ site.baseurl }}get-started/" > get up and running< / a > , you can place Font Awesome icons just about anywhere with the < code > < i> < / code > tag.
2013-05-03 14:41:31 +00:00
Many examples appreciatively re-used from the < a href = "{{ site.bootstrap.url }}" > Bootstrap documentation< / a > .
< / p >
< / div >
< div class = "span4" >
{% include ads/carbon-light-horizontal.html %}
< / div >
< / div >
2013-05-06 04:10:16 +00:00
< h2 class = "page-header" > Examples< / h2 >
< div class = "row" >
2013-05-03 00:12:33 +00:00
< div class = "span4" >
< div class = "well well-transparent" >
< p > Use Font Awesome icons in:< / p >
2013-05-06 04:10:16 +00:00
< ul class = "icons-ul" >
< li > < i class = "icon-li icon-ok" > < / i > Bulleted lists (like this one)< / li >
< li > < i class = "icon-li icon-ok" > < / i > Buttons< / li >
< li > < i class = "icon-li icon-ok" > < / i > Button groups< / li >
< li > < i class = "icon-li icon-ok" > < / i > Navigation< / li >
< li > < i class = "icon-li icon-ok" > < / i > Prepended form inputs< / li >
< li > < i class = "icon-li icon-ok" > < / i > … and many more with custom CSS< / li >
2013-05-03 00:12:33 +00:00
< / ul >
< / div >
< / div >
< div class = "span4" >
< p >
< a class = "btn" href = "#" > < i class = "icon-repeat" > < / i > Reload< / a >
< a class = "btn btn-success" href = "#" > < i class = "icon-shopping-cart icon-large" > < / i > Checkout< / a >
< a class = "btn btn-danger" href = "#" > < i class = "icon-trash icon-large" > < / i > Delete< / a >
< / p >
< p >
< a class = "btn btn-large btn-primary" href = "#" > < i class = "icon-comment" > < / i > Comment< / 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 > Info< / a >
< / p >
< div class = "well" style = "padding: 8px 0;" >
< 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 >
< / div >
< / div >
< div class = "span4" >
< div class = "btn-toolbar" >
< 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 >
< / div >
< form >
< div class = "control-group" >
< div class = "controls" >
< div class = "input-prepend" >
< span class = "add-on" > < i class = "icon-envelope" > < / i > < / span >
< input class = "span2" id = "inputIcon" type = "text" placeholder = "Email address" >
< / div >
< / div >
< / div >
< div class = "control-group" >
< div class = "controls" >
< div class = "input-prepend" >
< span class = "add-on" > < i class = "icon-key" > < / i > < / span >
< input class = "span2" id = "inputIcon2" type = "text" placeholder = "Password" >
< / div >
< / div >
< / div >
< / form >
< div >
< span class = "rating" >
< span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span >
< / span >
< / div >
< / div >
< / div >
< h3 class = "page-header" > New Styles in 3.0< / h3 >
< div class = "row" >
< div class = "span4" >
< i class = "icon-quote-left icon-4x pull-left icon-muted" > < / i >
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. Lots of new possibilities.
< / div >
< div class = "span4" >
< div class = "well well-large well-transparent lead" >
< i class = "icon-spinner icon-spin icon-2x pull-left" > < / i > Spinner icon when loading content...
< / div >
< / div >
< div class = "span4" >
< p >
2013-05-07 17:45:09 +00:00
< a class = "btn btn-large btn-danger" href = "#" > < i class = "icon-flag icon-2x pull-left" > < / i > Font Awesome< br > Version {{ site.font_awesome.version }}< / a >
2013-05-03 00:12:33 +00:00
< / p >
< a class = "btn btn-primary" href = "#" > < i class = "icon-refresh icon-spin" > < / i > Synchronizing Content...< / a >
< / div >
< / div >
< h3 class = "page-header" > Example HTML< / h3 >
< div class = "row" >
< div class = "span12" >
< h4 > Inline Icons< / h4 >
< / div >
< div class = "span3" >
< p > Place Font Awesome icons just about anywhere with the < code > < i> < / code > tag.< / p >
< / div >
< div class = "span9" >
< div class = "well well-transparent" >
< div style = "font-size: 24px; line-height: 1.5em;" >
< i class = "icon-camera-retro" > < / i > icon-camera-retro
< / div >
< / div >
< pre class = "prettyprint linenums" >
< i class="icon-camera-retro"> < /i> icon-camera-retro
< / pre >
< div class = "alert alert-info" > < i class = "icon-info-sign" > < / i > Icon classes are echoed via CSS :before.< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Larger Icons< / h4 >
< / div >
< div class = "span3" >
< p >
To increase the size of icons relative to its container, use < code > icon-large< / code > , < code > icon-2x< / code > ,
< code > icon-3x< / code > , or < code > icon-4x< / code > .
< / p >
< / div >
< div class = "span9" >
< p >
Increase the icon size by using the < code > icon-large< / code > (33% increase), < code > icon-2x< / code > ,
< code > icon-3x< / code > , or < code > icon-4x< / code > classes.
< / p >
< div class = "well well-transparent" >
< div style = "font-size: 24px; line-height: 1.5em;" >
< p > < i class = "icon-camera-retro icon-large" > < / i > icon-camera-retro< / p >
< p > < i class = "icon-camera-retro icon-2x" > < / i > icon-camera-retro< / p >
< p > < i class = "icon-camera-retro icon-3x" > < / i > icon-camera-retro< / p >
< p > < i class = "icon-camera-retro icon-4x" > < / i > icon-camera-retro< / p >
< / div >
< / div >
< pre class = "prettyprint linenums" >
< p> < i class=" icon-camera-retro icon-large" > < /i> icon-camera-retro< /p>
< p> < i class=" icon-camera-retro icon-2x" > < /i> icon-camera-retro< /p>
< p> < i class=" icon-camera-retro icon-3x" > < /i> icon-camera-retro< /p>
< p> < i class=" icon-camera-retro icon-4x" > < /i> icon-camera-retro< /p>
< / pre >
< div class = "alert alert-info" >
< i class = "icon-info-sign" > < / i > If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height.
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Animated Spinner< / h4 >
< / div >
< div class = "span3" >
< p >
Use the < code > icon-spin< / code > class to get any icon to rotate. Works best with < code > icon-spinner< / code > and
< code > icon-refresh< / code > .
< / p >
< / div >
< div class = "span9" >
< div class = "well well-large well-transparent lead" >
< i class = "icon-spinner icon-spin" > < / i > Spinner icon when loading content...
< / div >
< pre class = "prettyprint linenums" >
< i class=" icon-spinner icon-spin" > < /i> Spinner icon when loading content...
< / pre >
< p class = "alert alert-info" >
< i class = "icon-info-sign" > < / i > CSS3 animations aren't supported in IE7 - IE9.
< / p >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Bordered & Pulled Icons< / h4 >
< / div >
< div class = "span3" >
< p >
Use < code > icon-border< / code > and < code > pull-right< / code > or < code > pull-left< / code > for easy pull quotes or
article graphics.
< / p >
< / div >
< div class = "span9" >
< div class = "well well-large well-transparent" >
< i class = "icon-quote-left icon-4x pull-left icon-muted" > < / i >
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities.
< / div >
< pre class = "prettyprint linenums" >
< i class=" icon-quote-left icon-4x pull-left icon-muted" > < /i>
Use a few of the new styles together ... lots of new possibilities.
< / pre >
< div class = "well well-large well-transparent" >
< i class = "icon-flag icon-4x pull-left icon-border" > < / i >
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities.
< / div >
< pre class = "prettyprint linenums" >
< i class=" icon-flag icon-4x pull-left icon-border" > < /i>
Use a few of the new styles together ... lots of new possibilities.
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Buttons< / h4 >
< / div >
< div class = "span3" >
< p >
< a class = "btn" href = "#" >
< i class = "icon-repeat" > < / i > Reload< / a >
< a class = "btn btn-success" href = "#" >
< i class = "icon-shopping-cart icon-large" > < / i > Checkout< / a >
< / p >
< p >
< a class = "btn btn-large btn-primary" href = "#" >
< i class = "icon-comment" > < / i > Comment< / a >
< a class = "btn btn-small btn-info" href = "#" >
< i class = "icon-info-sign" > < / i > Info< / a >
< / p >
< p >
< 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 >
< / p >
< p >
2013-05-07 17:45:09 +00:00
< a class = "btn btn-large btn-danger" href = "#" > < i class = "icon-flag icon-2x pull-left" > < / i > Font Awesome< br > Version {{ site.font_awesome.version }}< / a >
2013-05-03 00:12:33 +00:00
< / p >
< p >
< a class = "btn btn-primary" href = "#" > < i class = "icon-refresh icon-spin" > < / i > Synchronizing Content...< / a >
< / p >
< / div >
< div class = "span9" >
< p >
Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
< code > pull-right< / code > and < code > pull-left< / code > , and < code > icon-spin< / code > .
< / p >
< pre class = "prettyprint linenums" >
< a class="btn" href="#">
< i class="icon-repeat"> < /i> Reload< /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-small btn-info" href="#">
< i class="icon-info-sign"> < /i> Info< /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-large btn-danger" href=" #" >
< i class=" icon-flag icon-2x pull-left" > < /i> Font Awesome< br> Version 3.0< /a>
< a class=" btn btn-primary" href=" #" >
< i class=" icon-refresh icon-spin" > < /i> Synchronizing Content...< /a>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Button groups< / h4 >
< / div >
< div class = "span3" >
< p >
< 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 >
< / p >
< / div >
< div class = "span9" >
< pre class = "prettyprint linenums" >
< 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>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Button dropdowns< / h4 >
< / div >
< div class = "span3" >
< p >
< div class = "btn-group open" >
< 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 >
< / div >
< / p >
< div class = "span9" >
< pre class = "prettyprint linenums" >
< div class="btn-group open">
< 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>
< / pre >
< div class = "alert alert-info" > < i class = "icon-info-sign" > < / i > Don't forget to add the appropriate JavaScript to enable button dropdowns.< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Lists< / h4 >
< / div >
< div class = "span3" >
< p >
< 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 >
< / p >
< / div >
< div class = "span9" >
< p > Easily replace individual bullets.< / p >
< pre class = "prettyprint linenums" >
< 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>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Navigation< / h4 >
< / div >
< div class = "span3" >
< div class = "well" style = "padding: 8px 0;" >
< 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 >
< / div >
< / div >
< div class = "span9" >
< p > Use Font Awesome icons in navigation to provide helpful visual cues.< / p >
< pre class = "prettyprint linenums" >
< 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>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Prepended form inputs< / h4 >
< / div >
< div class = "span3" >
< p >
< 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 >
< / p >
< / div >
< div class = "span9" >
< pre class = "prettyprint linenums" >
< 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>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span12" >
< h4 > Custom CSS< / h4 >
< / div >
< div class = "span3" >
< p > Anything you can do with CSS font styles, you can do with Font Awesome.< / p >
< / div >
< div class = "span9" >
< p > Star Ratings (inspired by < a href = "http://css-tricks.com/star-ratings/" target = "_blank" > CSS Tricks< / a > )< / p >
< div class = "well" >
< span class = "rating" >
< span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span >
< / span >
< / div >
< / div >
< / div >
< / section >
