aboutsummaryrefslogtreecommitdiffstats
path: root/library/font_awesome/src/_layouts/icon.html
diff options
context:
space:
mode:
Diffstat (limited to 'library/font_awesome/src/_layouts/icon.html')
-rw-r--r--library/font_awesome/src/_layouts/icon.html57
1 files changed, 37 insertions, 20 deletions
diff --git a/library/font_awesome/src/_layouts/icon.html b/library/font_awesome/src/_layouts/icon.html
index 83723acde..66edaf2a7 100644
--- a/library/font_awesome/src/_layouts/icon.html
+++ b/library/font_awesome/src/_layouts/icon.html
@@ -6,19 +6,31 @@ relative_path: ../../
<div class="jumbotron jumbotron-icon">
<div class="container">
<div class="info-icons">
- <i class="icon-{{ page.icon.id }} icon-6"></i>&nbsp;&nbsp;
- <span class="hidden-phone">
- <i class="icon-{{ page.icon.id }} icon-5"></i>&nbsp;&nbsp;
- <span class="hidden-tablet"><i class="icon-{{ page.icon.id }} icon-4"></i>&nbsp;&nbsp;</span>
- <i class="icon-{{ page.icon.id }} icon-3"></i>&nbsp;&nbsp;
- <i class="icon-{{ page.icon.id }} icon-2"></i>&nbsp;
+ <i class="fa fa-{{ page.icon.id }} fa-6" aria-hidden="true"></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 6x</span>&nbsp;&nbsp;
+ <span class="hide-xs">
+ <i class="fa fa-{{ page.icon.id }} fa-5" aria-hidden="true"></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 5x</span>
+ &nbsp;&nbsp;
+ <span class="hide-sm">
+ <i class="fa fa-{{ page.icon.id }} fa-4" aria-hidden="true"></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 4x</span>
+ &nbsp;&nbsp;
+ </span>
+ <i class="fa fa-{{ page.icon.id }} fa-3" aria-hidden="true"></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 3x</span>
+ &nbsp;&nbsp;
+ <i class="fa fa-{{ page.icon.id }} fa-2" aria-hidden="true"></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 2x</span>
+ &nbsp;
</span>
- <i class="icon-{{ page.icon.id }} icon-1"></i>
+ <i class="fa fa-{{ page.icon.id }} fa-1" aria-hidden="true"></i>
+ <span class="sr-only">Example of {{ page.icon.id }}</span>
</div>
<h1 class="info-class">
- icon-{{ page.icon.id }}
+ fa-{{ page.icon.id }}
<small>
- <i class="icon-{{ page.icon.id }}"></i> &middot;
+ <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i> &middot;
Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot;
Created: v{{ page.icon.created }} &middot;
Categories:
@@ -29,33 +41,38 @@ relative_path: ../../
{% if icon_alias_count > 0 %}
&middot; Aliases:
{% for alias in page.icon.aliases %}
- icon-{{ alias }}{% unless forloop.last %},{% endunless %}
+ fa-{{ alias }}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endif %}
+ {% if page.icon.url %}&middot; <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 %}
</small>
</h1>
</div>
</div>
-
<div class="container">
<section>
- <div class="row-fluid">
- <div class="span9">
- <p>After you get <a href="{{ page.relative_path }}integration/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
+ <div class="row">
+ <div class="col-md-9 col-sm-9">
+ <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>&lt;i&gt;</code> tag:</p>
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
- <i class="icon-{{ page.icon.id }}"></i> icon-{{ page.icon.id }}
+ <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 }}
</div>
</div>
{% highlight html %}
-<i class="icon-{{ page.icon.id }}"></i> icon-{{ page.icon.id }}
+<i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i>
{% endhighlight %}
- <br>
- <div class="lead"><i class="icon-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div>
+ <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>
</div>
- <div class="span3">
- <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>
+ <div class="col-md-3 col-sm-3">
+ <div class="vertical-ad">{% include ads/fusion.html %}</div>
</div>
</div>
</section>