diff options
Diffstat (limited to 'library/font_awesome/src/_layouts/icon.html')
| -rw-r--r-- | library/font_awesome/src/_layouts/icon.html | 57 |
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> - <span class="hidden-phone"> - <i class="icon-{{ page.icon.id }} icon-5"></i> - <span class="hidden-tablet"><i class="icon-{{ page.icon.id }} icon-4"></i> </span> - <i class="icon-{{ page.icon.id }} icon-3"></i> - <i class="icon-{{ page.icon.id }} icon-2"></i> + <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> + <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> + + <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> + + </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> + + <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> + </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> · + <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i> · Unicode: <span class="upper">{{ page.icon.unicode }}</span> · Created: v{{ page.icon.created }} · Categories: @@ -29,33 +41,38 @@ relative_path: ../../ {% if icon_alias_count > 0 %} · 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 %}· <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><i></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><i></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> |