---
layout: base
title: Font Awesome & Accessibility
navbar_active: accessibility
view_class: v-accessibility
relative_path: ../
---
{% capture jumbotron_h1 %}<i class="fa fa-universal-access" aria-hidden="true"></i>&nbsp; Accessibility{% endcapture %}
{% capture jumbotron_p %}Make your icons awesome for all of your users{% endcapture %}

{% include jumbotron.html %}

<div class="container">
  <section id="accessibility-intro" class="accessibility-intro">
    <div class="row">
      <div class="col-md-6">
        <p class="lead">
          Icons are symbols that can convey a ton of information and really help
          people comprehend directions, signs, and interfaces. It's important
          that we create and use them so that they can reach the largest amount
          of people possible.
        </p>
      </div>
      <div class="col-md-6">
          {% include accessibility/background.html %}
      </div>
    </div>
  </section>

  <h2 class="page-header">
    Using Font Awesome with Acessibility in mind
  </h2>

  {% include accessibility/accessibility-facdn.html %}

  <div class="hr margin-top-xl">
    <span class="hr-text text-xl text-muted">or</span>
  </div>

  {% include accessibility/accessibility-manual.html %}
  {% include accessibility/other.html %}
</div>