mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-06-25 00:30:51 +02:00
9496b600a8
* adding accessibility informational page * adding in accessibility-minded examples * adding accessibility practices to icon markup example * updating doc site icons with accessibility best practices * updating homepage with accessibility information Fix #6133
43 lines
2.3 KiB
HTML
43 lines
2.3 KiB
HTML
<section id="why" class="feature-list">
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-flag" aria-hidden="true"></i> One Font, {{ icons | size }} Icons</h4>
|
|
In a single collection, Font Awesome is a pictographic language of web-related actions.
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-ban" aria-hidden="true"></i> No JavaScript Required</h4>
|
|
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-arrows-alt" aria-hidden="true"></i> Infinite Scalability</h4>
|
|
Scalable vector graphics means every icon looks awesome at any size.
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-microphone" aria-hidden="true"></i> Free, as in Speech</h4>
|
|
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-pencil" aria-hidden="true"></i> CSS Control</h4>
|
|
Easily style icon color, size, shadow, and anything that's possible with CSS.
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-eye" aria-hidden="true"></i> Perfect on Retina Displays</h4>
|
|
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-gamepad" aria-hidden="true"></i> Plays Well with Others</h4>
|
|
Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, Font Awesome works great with all frameworks.
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-desktop" aria-hidden="true"></i> Desktop Friendly</h4>
|
|
To use on the desktop or for a complete set of vectors,
|
|
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4><i class="fa fa-wheelchair" aria-hidden="true"></i> Accessibility-minded</h4>
|
|
Font Awesome <i class="fa fa-heart" aria-hidden="true"></i><span class="sr-only">loves</span> screen readers and
|
|
<a href="{{ page.relative_path }}accessibility/">helps make your icons accessible</a> on the web.
|
|
</div>
|
|
</div>
|
|
</section>
|