Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## 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

Example 4.24 - Web Content Management - Example 4.24

- Markup
- Screenshot

     <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

Example 4.25 - External Hyperlnks - Example 4.25 (Without Styles)

- Markup
- Style
- Display

     <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 type="text/css">`) 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.

Copyright © David Heitmeyer