Amara styleguide

Icons

Icons are implemented via a custom font-family. The basic syntax is <i class="icon icon-filename">. Icons are normally sized the same as the surrounding text. Use the icon-sm, icon-md, icon-lg classes to manually size them. Those sizes match up with avatar-default, avatar-md, and avatar-lg respectively.

We also load Font Awesome 5, so any of those icons can also be used.

  • icon-alert
  • icon-approve
  • icon-approve_outline
  • icon-complete
  • icon-incomplete
  • icon-deny
  • icon-evaluate
  • icon-review
  • icon-transcribe
  • icon-translate
  • icon-initial-work
  • icon-clock
  • icon-mail
  • icon-search
  • icon-star
  • icon-trash
  • icon-arrow
  • icon-forward
  • icon-back
  • icon-up
  • icon-down
  • icon-check
  • icon-close
  • icon-edit
  • icon-check-circle
  • icon-x-circle
  • icon-loading
  • icon-provider-request

Example:

Example

<ul class="inline">
    <li>
      <span class="avatar">
        <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-default-30.png">
      </span>
      <i class="icon icon-review icon-sm"></i>
    </li>
    <li>
      <span class="avatar avatar-md">
        <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-default-50.png">
      </span>
      <i class="icon icon-review icon-md"></i>
    </li>
    <li>
      <span class="avatar avatar-lg">
        <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-default-100.png">
      </span>
      <i class="icon icon-review icon-lg"></i>
    </li>
  </ul>

Example:

Example

<ul class="inline">
    <li>
      <span class="fa fa-address-book"></span>
    </li>
    <li>
      <span class="fab fa-facebook-square"></span>
    </li>
    <li>
      <span class="fas fa-plane"></span>
    </li>
  </ul>