Backgrounds - Icons

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

Social Media

social media icons as background images

<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

Example 4.23 - Web Content Management - Example 4.23
 
 <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>
 

Background Icons

External Links

Example 4.24 - External Hyperlnks - Example 4.24 (Without Styles)
 
 <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>

In style element (<style>) within head element:

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

A bonus of attending Harvard Summer School is being able to enjoy Harvard Square in Cambridge, Massachusetts.