Bureaucrats, confirmed, Administrators
4,558
edits
Changes
Jump to navigation
Jump to search
add bootstrap example
Is how to show a '''Font Awesome''' icon, pulled to the left, 5x bigger than normal, and explicitly telling screen readers to ignore the item as decorative.<i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i>
== Bootstrap Example ==
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
Two of three columns
</div>
<div class="col-sm-4">
Three of three columns
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-coffee" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
Coffee
</div>
<div class="col-sm-4">
I love coffee!!!
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-cloud" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
cloud
</div>
<div class="col-sm-4">
Cloud deployment means instantly available and scalable. We can also do on-premise / local installations to meet your custom requirements.
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-cubes" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
Blocks
</div>
<div class="col-sm-4">
All the pieces are put together for you. NO assembly required!
</div>
</div>
</div>
<i class="fa fa-pull-left fa-5x fa-sprockets" aria-hidden="true"></i>
=== Getting it ===
# Sign up for a unique embed codeat the fontawesome website.
# Add the script source to your wiki by editing the [[MediaWiki:Common.js]] file where you add a call to 'load' the external script <code><nowiki>mw.loader.load('//use.fontawesome.com/14c71d3de0.js');</nowiki></code>
# Insert the <code><nowiki><i></nowiki></code> tags where ever you want. Note that there are various sizes pre-defined as fa-1 (smallest) to fa-6 (largest)
== More ==
# Check http://fontawesome.io/examples/
# http://fontawesome.io/icons/ The icons (Note there is a new kickstarter for a Pro product https://www.kickstarter.com/projects/232193852/font-awesome-5)
# https://cdn.fontawesome.com/help#qa-icons-code
# https://stackoverflow.com/questions/tagged/font-awesome
