Backgrounds - Icons

Use small images as backgrounds in links to display visual icons or cues.

Social Media

<ul class="list-social-links list-clean">
  <li>
    <a href="http://facebook.com/harvard" class="social-link social-link--facebook">
      <span class="is-visually-hidden">
        Facebook
      </span>
    </a>
  </li>
  <li>
    <a href="http://twitter.com/harvard" class="social-link social-link--twitter">
      <span class="is-visually-hidden">
        Twitter
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.instagram.com/harvard" class="social-link social-link--instagram">
      <span class="is-visually-hidden">
        Instagram
      </span>
    </a>
  </li>
  <li>
    <a href="http://youtube.com/harvard" class="social-link social-link--youtube">
      <span class="is-visually-hidden">
        YouTube
      </span>
    </a>
  </li>
  <li>
    <a href="https://soundcloud.com/harvard" class="social-link social-link--soundcloud">
      <span class="is-visually-hidden">
        SoundCloud
      </span>
    </a>
  </li>
  <li>
    <a href="http://plus.google.com/+harvard" class="social-link social-link--google-plus">
      <span class="is-visually-hidden">
        Google Plus
      </span>
    </a>
  </li>
  <li>
    <a href="https://www.linkedin.com/edu/school?id=18483" class="social-link social-link--linkedin">
      <span class="is-visually-hidden">
        LinkedIn
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.harvard.edu/itunes" class="social-link social-link--itunes">
      <span class="is-visually-hidden">
        iTunes
      </span>
    </a>
  </li>
</ul>

Web Content Management

 <ul class="topic-header-menu">
<li><a class="icon-replace act-edit" title="Edit this Topic Box" href="...">Edit</a></li>
<li><a class="icon-replace act-maximize" title="Maximize this Topic Box" href="...">Maximize</a></li>
<li><a class="icon-replace act-print" title="Print-friendly view of this Topic Box" href="...">Print</a></li>
</ul>

External Links

 <p>A bonus of attending<a href="http://www.summer.harvard.edu/">Harvard Summer School</a>is being able to enjoy<a href="http://www.harvardsquare.com/" class="external">Harvard Square</a>in<a href="http://www.cambridgema.gov/" class="external">Cambridge</a>,<a href="http://www.mass.gov" class="external">Massachusetts</a>.</p>

a.external  {
  padding: 2px 25px 2px 0px;
  display:inline;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url('images/external.png');
}