1 | 1 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,79 @@ |
1 |
+--- |
|
2 |
+layout: base |
|
3 |
+title_suffix: Font Awesome Icons |
|
4 |
+relative_path: ../../ |
|
5 |
+--- |
|
6 |
+<div class="jumbotron jumbotron-icon"> |
|
7 |
+ <div class="container"> |
|
8 |
+ <div class="info-icons"> |
|
9 |
+ <i class="fa fa-{{ page.icon.id }} fa-6" aria-hidden="true"></i> |
|
10 |
+ <span class="sr-only">Example of {{ page.icon.id }} at 6x</span> |
|
11 |
+ <span class="hide-xs"> |
|
12 |
+ <i class="fa fa-{{ page.icon.id }} fa-5" aria-hidden="true"></i> |
|
13 |
+ <span class="sr-only">Example of {{ page.icon.id }} at 5x</span> |
|
14 |
+ |
|
15 |
+ <span class="hide-sm"> |
|
16 |
+ <i class="fa fa-{{ page.icon.id }} fa-4" aria-hidden="true"></i> |
|
17 |
+ <span class="sr-only">Example of {{ page.icon.id }} at 4x</span> |
|
18 |
+ |
|
19 |
+ </span> |
|
20 |
+ <i class="fa fa-{{ page.icon.id }} fa-3" aria-hidden="true"></i> |
|
21 |
+ <span class="sr-only">Example of {{ page.icon.id }} at 3x</span> |
|
22 |
+ |
|
23 |
+ <i class="fa fa-{{ page.icon.id }} fa-2" aria-hidden="true"></i> |
|
24 |
+ <span class="sr-only">Example of {{ page.icon.id }} at 2x</span> |
|
25 |
+ |
|
26 |
+ </span> |
|
27 |
+ <i class="fa fa-{{ page.icon.id }} fa-1" aria-hidden="true"></i> |
|
28 |
+ <span class="sr-only">Example of {{ page.icon.id }}</span> |
|
29 |
+ </div> |
|
30 |
+ <h1 class="info-class"> |
|
31 |
+ fa-{{ page.icon.id }} |
|
32 |
+ <small> |
|
33 |
+ <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i> · |
|
34 |
+ Unicode: <span class="upper">{{ page.icon.unicode }}</span> · |
|
35 |
+ Created: v{{ page.icon.created }} · |
|
36 |
+ Categories: |
|
37 |
+ {% for category in page.icon.categories %} |
|
38 |
+ {{ category }}{% unless forloop.last %},{% endunless %} |
|
39 |
+ {% endfor %} |
|
40 |
+ {% assign icon_alias_count = page.icon.aliases | size %} |
|
41 |
+ {% if icon_alias_count > 0 %} |
|
42 |
+ · Aliases: |
|
43 |
+ {% for alias in page.icon.aliases %} |
|
44 |
+ fa-{{ alias }}{% unless forloop.last %},{% endunless %} |
|
45 |
+ {% endfor %} |
|
46 |
+ {% endif %} |
|
47 |
+ {% 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 %} |
|
48 |
+ </small> |
|
49 |
+ </h1> |
|
50 |
+ </div> |
|
51 |
+</div> |
|
52 |
+ |
|
53 |
+<div class="container"> |
|
54 |
+ <section> |
|
55 |
+ <div class="row"> |
|
56 |
+ <div class="col-md-9 col-sm-9"> |
|
57 |
+ <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> |
|
58 |
+ <div class="well well-transparent"> |
|
59 |
+ <div style="font-size: 24px; line-height: 1.5em;"> |
|
60 |
+ <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 }} |
|
61 |
+ </div> |
|
62 |
+ </div> |
|
63 |
+{% highlight html %} |
|
64 |
+<i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i> |
|
65 |
+{% endhighlight %} |
|
66 |
+ <p class="margin-bottom-lg"> |
|
67 |
+ <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> |
|
68 |
+ </p> |
|
69 |
+ |
|
70 |
+ <div class="lead"> |
|
71 |
+ <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>. |
|
72 |
+ </div> |
|
73 |
+ </div> |
|
74 |
+ <div class="col-md-3 col-sm-3"> |
|
75 |
+ <div class="vertical-ad">{% include ads/carbon.html %}</div> |
|
76 |
+ </div> |
|
77 |
+ </div> |
|
78 |
+ </section> |
|
79 |
+</div> |