ITS

Information Technology Services
Information Technology Services

Icons

Icons can be used to draw attention to information and resources within or beyond your site, such as on social media sites.

Markup & Result

Twitter
<a class="twitter-icon" href="">
Connect with Queen's on Twitter</a> 
Facebook
<a class="facebook-icon" href="">
Connect with Queen's on Facebook</a> 
YouTube
<a class="youtube-icon" href="">
Connect with Queen's on YouTube</a>
Flickr
<a class="flickr-icon" href="">
Connect with Queen's on Flickr</a>
LinkedIn
<a class="linkedin-icon" href="">
Connect with Queen's on LinkedIn</a>
Pinterest
<a class="pinterest-icon" href="">
Connect with Queen&#39;s on Pinterest</a>
Blog
<a class="blog-icon" href="">
Read about Queen's on the Blog</a>
RSS
<a class="rss-icon" href="">
Connect with Queen's on the RSS</a>
WordPress
<a class="wordpress-icon" href="">
Connect with Queen's on Wordpress</a>
Instagram
<a class="instagram-icon" href="">
Connect with Queen's on Instagram</a>
Tumblr
<a class="tumblr-icon" href="">
Connect with Queen's on Tumblr</a>
PDF
<p class="pdf">
<a href="">PDF Name (PDF, ### KB)</a>
</p>
PDF - align right
<p class="pdf align-right">
<a href="">PDF Name (PDF, ### KB)</a>
</p>
Download
<p class="download">
<a href="">Document Name (Word, #### KB)</a>
</p>
Download - align right
<p class="download align-right">
<a href="">Document Name (Word, #### KB)</a>
</p>

 

Adding markup to the page

  • In the source (HTML) copy and paste the markup for the icon.
  • Replace the example text with your text.
  • in the a href = " " statement add the url for your text between the quotation marks.
  • Exit the source (HTML).
  • Save your page to view the layout (Note: column layout will not display while editing).
  • See also: Editing the Source Code tutorial