Fonts as icons( RSS button )

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.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.
1.  To get started, move the .eot, .svg, .ttf, and .wofffonts 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('embeddedopentype'),
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+ 6on 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