FontAwesome: Difference between revisions
No edit summary |
add bootstrap example |
||
| Line 5: | Line 5: | ||
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> | 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> | |||
| Line 45: | Line 96: | ||
=== Getting it === | === Getting it === | ||
# Sign up for a unique embed code. | # Sign up for a unique embed code at 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> | # 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) | # 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/ | # 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://cdn.fontawesome.com/help#qa-icons-code | ||
# https://stackoverflow.com/questions/tagged/font-awesome | # https://stackoverflow.com/questions/tagged/font-awesome | ||