2013-05-03 02:12:33 +02:00
---
layout: base
2018-02-04 20:53:02 +01:00
title_suffix: Fork Awesome Icons
2013-05-09 05:15:29 +02:00
relative_path: ../../
2013-05-03 02:12:33 +02:00
---
2013-05-03 05:16:41 +02:00
< div class = "jumbotron jumbotron-icon" >
< div class = "container" >
< div class = "info-icons" >
2016-04-12 14:05:53 +02:00
< i class = "fa fa-{{ page.icon.id }} fa-6" aria-hidden = "true" > < / i >
2016-04-01 15:45:15 +02:00
< span class = "sr-only" > Example of {{ page.icon.id }} at 6x< / span >
2013-10-06 18:36:59 +02:00
< span class = "hide-xs" >
2016-04-12 14:05:53 +02:00
< i class = "fa fa-{{ page.icon.id }} fa-5" aria-hidden = "true" > < / i >
2016-04-01 15:45:15 +02:00
< span class = "sr-only" > Example of {{ page.icon.id }} at 5x< / span >
< span class = "hide-sm" >
2016-04-12 14:05:53 +02:00
< i class = "fa fa-{{ page.icon.id }} fa-4" aria-hidden = "true" > < / i >
2016-04-01 15:45:15 +02:00
< span class = "sr-only" > Example of {{ page.icon.id }} at 4x< / span >
< / span >
2016-04-12 14:05:53 +02:00
< i class = "fa fa-{{ page.icon.id }} fa-3" aria-hidden = "true" > < / i >
2016-04-01 15:45:15 +02:00
< span class = "sr-only" > Example of {{ page.icon.id }} at 3x< / span >
2016-04-12 14:05:53 +02:00
< i class = "fa fa-{{ page.icon.id }} fa-2" aria-hidden = "true" > < / i >
2016-04-01 15:45:15 +02:00
< span class = "sr-only" > Example of {{ page.icon.id }} at 2x< / span >
2013-06-06 19:48:43 +02:00
< / span >
2016-04-01 15:45:15 +02:00
< i class = "fa fa-{{ page.icon.id }} fa-1" aria-hidden = "true" > < / i >
< span class = "sr-only" > Example of {{ page.icon.id }}< / span >
2013-05-03 05:16:41 +02:00
< / div >
< h1 class = "info-class" >
2013-10-21 01:12:13 +02:00
fa-{{ page.icon.id }}
2013-05-03 05:16:41 +02:00
< small >
2016-04-01 15:45:15 +02:00
< i class = "fa fa-{{ page.icon.id }}" aria-hidden = "true" > < / i > ·
2013-05-17 15:35:23 +02:00
Unicode: < span class = "upper" > {{ page.icon.unicode }}< / span > ·
Created: v{{ page.icon.created }} ·
2013-05-03 05:16:41 +02:00
Categories:
2013-05-17 15:35:23 +02:00
{% for category in page.icon.categories %}
2013-05-03 05:16:41 +02:00
{{ category }}{% unless forloop.last %},{% endunless %}
{% endfor %}
2013-06-06 19:52:06 +02:00
{% assign icon_alias_count = page.icon.aliases | size %}
{% if icon_alias_count > 0 %}
2013-05-03 22:00:59 +02:00
· Aliases:
2013-05-17 15:35:23 +02:00
{% for alias in page.icon.aliases %}
2013-10-21 01:12:13 +02:00
fa-{{ alias }}{% unless forloop.last %},{% endunless %}
2013-05-03 05:16:41 +02:00
{% endfor %}
{% endif %}
2016-04-06 18:45:20 +02:00
{% if page.icon.url %}· < a target = "_blank" rel = "nofollow" href = "http://{{ page.icon.url }}" > {{ page.icon.url }}< i class = "fa fa-external-link-square margin-left-sm" > < / i > < / a > {% endif %}
2013-05-03 05:16:41 +02:00
< / small >
< / h1 >
< / div >
< / div >
2013-05-03 02:12:33 +02:00
< div class = "container" >
< section >
2013-10-05 21:40:57 +02:00
< div class = "row" >
2018-02-04 20:53:02 +01:00
< div class = "col-md-12 col-sm-12" >
2013-07-15 10:25:57 +02:00
< p > After you get < a href = "{{ page.relative_path }}get-started/" > up and running< / a > , you can place Font Awesome icons just about anywhere with the < code > < i> < / code > tag:< / p >
2013-05-03 05:16:41 +02:00
< div class = "well well-transparent" >
< div style = "font-size: 24px; line-height: 1.5em;" >
2016-04-01 15:45:15 +02:00
< i class = "fa fa-{{ page.icon.id }}" aria-hidden = "true" > < / i > < span class = "sr-only" > Example of {{ page.icon.id }}< / span > fa-{{ page.icon.id }}
2013-05-03 05:16:41 +02:00
< / div >
< / div >
2013-05-23 19:14:14 +02:00
{% highlight html %}
2016-04-01 15:45:15 +02:00
< i class = "fa fa-{{ page.icon.id }}" aria-hidden = "true" > < / i >
2013-05-03 05:16:41 +02:00
{% endhighlight %}
2016-04-01 15:45:15 +02:00
< p class = "margin-bottom-lg" >
< small class = "text-muted" > Note: to improve < a href = "{{ page.relative_path }}accessibility/" > web accessibility< / a > , we recommend using < strong > aria-hidden="true"< / strong > to hide icons used purely for decoration.< / small >
< / p >
< div class = "lead" >
< i class = "fa fa-info-circle" aria-hidden " true " > < / i > Looking for more? Check out the < a href = "{{ page.relative_path }}examples/" > examples< / a > .
< / div >
2013-05-03 05:16:41 +02:00
< / div >
< / div >
2013-05-03 02:12:33 +02:00
< / section >
< / div >