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