CSS, HTML

Using Icon Fonts

Why Use Icon Fonts?

A couple of significant reasons have contributed to the widespread use of icon fonts for interface graphics.

First of all, an icon font is a single file—typically very small at that, because designers will make fonts that contain only the needed symbols. These will be stored in utf upper regions (font geek talk that you can ignore here) where they won’t be confused with glyphs with intrinsic meaning (like letters or punctuation marks). The more files a server tries to download simultaneously, the slower the site (all other things being equal), so keeping all the interface icons in a simple file is good for performance

To get around the downloading  a bunch of small files problem, many designers formerly combined icon graphics into css sprites then used background-position properties on sized elements to reveal and hide individual graphics in the sprite sheet.However, this technique has fallen largely out of favor. One reason for this is that our element sizes are typically fluid in responsive designs. Moreover, in the new world of increasingly high resolution screens, bitmapped interface graphics can often end up looking fuzzy. Because fonts are vectors, they remain sharp, especially if used at the “original” size or at a multiple thereof.

How to Do It

Download our sample files for this exercise. Inside you will find two html files: index-start and index-completed. You will work with the first, obviously.

We will do the icons for a hypothetical blog layout. Screenshots for the page (wide and narrow) are in the screenshots folder.

Here’s the top of the page:

Hypothetical Blog Layout

And here’s the footer:

Screen Shot 2016-02-22 at 11.51.16 PM

In case you’re wondering why I have a both a visible search box and a search icon (the magnifying glass), here’s why: in a later exercise in this course, we will use JavaScript or jQuery to hide the search box and social icons on page load, then make the magnifying glass and ellipsis figures act as buttons to reveal those two items. For now, however,  just pardon the redundancy.

FontAwesome

There are a number of different ways to use icon fonts. In this exercise, we will use one of the most common: fontawesome.

At the fontawesome site, click on the Get Started  menu item.

In the middle of the page is a field for you to submit your email address. Do so, then check your mail. The font-awesome website will email you a link to a JavaScript.  It will look something like this (don’t use this one: I changed part of the identifier, so it won’t work).

<script src="https://use.fontawesome.com/d1dse4ba.js"></script>

Put the line of code you get from your email into the HEAD section of each of your HTML files.

Add Your StyleSheet

To test if the FontAwesome stylesheet is downloading correctly, load the page in Chrome, control-click in it and choose Inspect Element. Go to the Sources section of the Inspector:

Chrome Inspector Source Panel

In the screenshot above, we see the local resources (my html file and css folder), plus font awesome, plus code for the youtube videos that are in our sample file. The s.yimg content is also from YouTube (it stands for youtube image).

Now, inside the css folder, make a new stylesheet file and link to it in the head of your index-start file.

The Syntax

So we have FontAwesome hooked up correctly. Now go to the FontAwesome examples page. The first example is like this

<i class="fa fa-camera-retro"></i>

FontAwesome, in other words, uses empty italics elements with two or more classes for each needed icon.

I, and others, will typically use an empty <span> element, however, as spans have long been used for empty element machinations.

So here’s one of our menus.

<ul class="menu-social">
 <a href="http://facebook.com">Facebook</a>
 <a href="http://twitter.com">Twitter</a>
 <a href="http://pinterest">Pinterest</a>
 <a href="http://contact.reaction.ca">Contact</a>
 <a href="http://about.reaction.ca">About</a>
 <a href="#">YouTube</a>
</ul>
 

Directly in front of the word FaceBook, put in an empty <span> element.  In other words, put it inside the actual link code, so that the icon will be clickable).

Then go to the FontAwesome Icons page and find one of the FaceBook Icons—say, the Facebook-Square icon. If I click on it, I get the CSS classes needed to use that icon. Add them to your empty span, like so:


<span class="fa fa-facebook-square"</span>

Ultimately your code for that link will look like this:

<li>
  <a href="http://facebook.com">
   <span class="fa fa-facebook-square"></span>Facebook
  </a>
</li>

Test the page. You should see something like this:

Menu With Icon Example

Visually Hidden Elements

If we look more closely at the screenshot of the completed layout (detail below), we see that the search and social link text does not show up (items two and three in the shot above).

Yet More Icons

 

In the bottom six buttons, the words appear underneath the icons. That’s just a matter of styling, working with the display property.

For items two and three in the above screenshot, we need to hide the text—but in a way that makes the links still accessible to the visually impaired. If we delete that text, a screenreader will have no way of making sense of the element. Display:none has also been found to be inaccessible.

Fortunately, a lot of work has gone into finding a viable solution: the visuallyhidden class. If you search for that phrase, you’ll see it explained on a wide range of pages, include ones for icomoon (another icon font solution we will use in a later class), html5boilerplate, and the very influential A11Y project.

We’ll borrow the code from the A11Y Project. From that page, take the second code snippet:

.visually-hidden { /*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
} 
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; } 

To hide a word or phrase then, wrap it in a SPAN tag with a class of visually-hidden.

 <li>
<a href="#">
  <span class="fa fa-search"></span>
  <span class="visually-hidden">Search</span>
</a></li> 

This will produce this effect:
VisuallyHidden

And Now Your Task: Finish The Page

  1. Add all the icons in the header
  2. Add the required icons in the footer, including that for Creative Commons
  3. Style these menus
  4. Style the rest of the page as closely as possible to that in the screenshot
  5. Make the page responsive
  6. Figure out how to make the videos responsive. That will take some googling.
  7. Take care with the typography. I use a number of google fonts. See if you can match the ones in the screenshots to ones at Google. Try to get the sizes, spacing, and hierarchy as set up in the screenshots. I’m not sure who said half of web design is typography, but he or she was right.

Have fun.

There is an index-completed file in the download, if you get really stuck. But try to work your way through problems rather than looking at what I did: you might find a better way, or a way that makes more sense to you.

Standard