Fonts as icons (Should know)

Web fonts are typically used for applying different typefaces to your designs, but they can also be used to add high-definition icons. Typefaces that are made up of symbols and shapes are called dingbats. You may be familiar with some of these fonts that have been pre-installed on your computer, but typically they don't serve much purpose.

Web designers can find useful sets of dingbats that are specifically tailored for building websites. These include icons for social media, shopping carts, e-mail, zoom, print, and other images that are useful for designing user interfaces. You could even create your own font with custom icons for your site. In this recipe, we'll use what we learned in the embedding fonts recipe to add a dingbat font and create an RSS button.

Getting ready

To get started we need a dingbat font to work with. For this example, we'll be using the Modern Pictograms @font-face kit, which can be downloaded from http://www.fontsquirrel.com/fonts/modern-pictograms. Download the kit with all the font formats available to ensure compatibility with older browsers.

How to do it...

1. To get started, move the .eot, .svg, .ttf, and .woff fonts that you downloaded, into your /retina/ folder. Then create a new HTML document called dingbats.html inside the /retina/ folder. Within the basic HTML structure we'll add some CSS code to include our web font.

   <style>
   	
     @font-face {
       font-family: 'ModernPictogramsNormal';
       src: url('modernpics-webfont.eot');
       src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
              url('modernpics-webfont.woff') format('woff'),
              url('modernpics-webfont.ttf') format('truetype'),
              url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
   }

2. Then we'll add a class that lets us create an RSS button.

   .rssButton {
       background: #ff9c00;
       border-radius: 8px;
       cursor: pointer;
       height: 50px;
       width: 50px;
       margin: 20px;
       font-family:'ModernPictogramsNormal';
       font-size: 50px;
       color: #fff;
       line-height: 15px;
       text-align: center;
     }
   
   </style>

3. Then we'll add the HTML code to display our button. The RSS icon is a "^" character, which is Shift + 6 on the keyboard.

   <div class="rssButton">^</div>

4. If you run this code inside of your browser you should see the RSS button. Notice that the button is just as sharp on a Retina device while zooming in.

How it works...

To start creating our RSS icon we set up @font-face rules for the font kit we downloaded (refer to the previous recipe on embedding fonts for additional information). Then we created a class to format the button. We started out by creating the structure with an orange background, rounded corners, width, and height.

Next, we added the settings for our new dingbat font. I've added a line-height attribute here to make sure the icon is set in the middle of the button. Finally, we created a div with the rssButton class and added the ^ character to it, which is the RSS icon dingbat.

There's more...

The benefit of using a font instead of an image is that fonts are vector graphics. This means that the font will scale to any size because it is based on code rather than pixels. A user can zoom to any level on their device and the icon will still appear sharp. You can also reuse this icon at any size or color on your site without having to worry about creating additional images.