Fontastic Icons

The SVG icons used in the ACME site were selected from http://fontastic.me.

The HTML page below is not used in the site. The icons are, but not this HTML.

How to use

To use these icons across the site, copy the source code below and paste it into your template.

icons

<div class="container">
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-bars">
        <title>bars</title>
        <use xlink:href="../images/icons/icons.svg#icon-bars"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-bars&quot;&gt;&lt;title&gt;navigation&lt;/title&gt;&lt;use xlink:href=&quot;#icon-bars&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-twitter">
        <title>twitter</title>
        <use xlink:href="../images/icons/icons.svg#icon-twitter"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-twitter&quot;&gt;&lt;title&gt;Twitter&lt;/title&gt;&lt;use xlink:href=&quot;#icon-twitter&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-facebook">
        <title>facebook</title>
        <use xlink:href="../images/icons/icons.svg#icon-facebook"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-facebook&quot;&gt;&lt;title&gt;Facebook&lt;/title&gt;&lt;use xlink:href=&quot;#icon-facebook&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-instagram">
        <title>instagram</title>
        <use xlink:href="../images/icons/icons.svg#icon-instagram"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-instagram&quot;&gt;&lt;title&gt;Instagram&lt;/title&gt;&lt;use xlink:href=&quot;#icon-instagram&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-angle-right">
        <title>angle-right</title>
        <use xlink:href="../images/icons/icons.svg#icon-angle-right"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-angle-right&quot;&gt;&lt;title&gt;next&lt;/title&gt;&lt;use xlink:href=&quot;#icon-angle-right&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-angle-left">
        <title>angle-left</title>
        <use xlink:href="../images/icons/icons.svg#icon-angle-left"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-angle-left&quot;&gt;&lt;title&gt;previous&lt;/title&gt;&lt;use xlink:href=&quot;#icon-angle-left&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-angle-down">
        <title>angle-down</title>
        <use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-angle-down&quot;&gt;&lt;title&gt;down arrow&lt;/title&gt;&lt;use xlink:href=&quot;#icon-angle-down&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-youtube">
        <title>youtube</title>
        <use xlink:href="../images/icons/icons.svg#icon-youtube"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-youtube&quot;&gt;&lt;title&gt;YouTube&lt;/title&gt;&lt;use xlink:href=&quot;#icon-youtube&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-times">
        <title>times</title>
        <use xlink:href="../images/icons/icons.svg#icon-times"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-times&quot;&gt;&lt;title&gt;close&lt;/title&gt;&lt;use xlink:href=&quot;#icon-times&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-auto">
      <svg class="icon-spin-alt">
        <title>spin-alt</title>
        <use xlink:href="../images/icons/icons.svg#icon-spin-alt"></use>
      </svg>
    </div>
    <div class="col">
      <input value="&lt;svg class=&quot;icon-spin-alt&quot;&gt;&lt;title&gt;loading&lt;/title&gt;&lt;use xlink:href=&quot;#icon-spin-alt&quot;&gt;&lt;/use&gt;&lt;/svg&gt;" />
    </div>
  </div>
</div>
<style>
  /* inline styles meant only for the documentation page, not the ACME site; */
  div.container {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  div.row+div.row {
    margin-top: 24px;
  }
  [class^='icon-'] {
    display: block;
  }
  input {
    border: 0;
    background: #ccc;
    padding: 12px 24px;
    display: block;
    width: 100%;
  }
</style>
<script>
  // make it easy to copy the code needed to generate an icon;
  // on focus of an INPUT, select all the text (it's what the user is trying to do anyways);
  var inputs = document.getElementsByTagName('input');
  for (let input of inputs) {
    input.addEventListener('focus', (event) => {
      event.target.select();
    });
  }
</script>

[class^='icon-'],
[class*=' icon-'] {
  height: 32px;
  width: 32px;
  display: inline-block;
  fill: $color__highlightLight;
}

.icon-spin-alt {
  animation-name: rotate;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}