Using icon fonts on Podcastpedia.org

Some time ago I discovered CSS sprites and I said to myself “what a cool thing, I must definitely use it on Podcastpedia.org, for all the existent social, flags and media icons”- by using CSS sprites you send only one HTTP request to get the bigger picture, instead of issuing individual HTTP requests for each icon.  When I finally rolled up my sleeves and built a CSS sprite for the icons, I had another revelation – I recalled having heard about icon fonts, which were supposed to be superior to using images as icons in every way (well maybe except the monochromatic part…).

Octocat Source code for this post is available on Github - podcastpedia.org is an open source project.

1. Icon font libraries

After an initial research on that topic, I’ve noticed there is a myriad of resources out there for icon fonts to choose from : Font Awesome, Glyphicons, IcoMoon etc. For more of them you can check out out this compilation of icon fonts resources from css-tricks.com.

For Podcastpedia I chose the ones from IcoMoon, because I’ve heard of the website at a JavaScript/HTML 5 conference I attended in Munich and I really liked it after giving it an initial try. The IcoMoon app lets you build and use your own icon sets in different formats including SVG, icon font or simple PNG sprites (I have downloaded the font). You also get a demo.html file and a style.css demonstrating how you can use them.

2. How to use Icon Fonts

I have included the parts of the generated .css from icomoon.io, into the style sheet file of Podcastpedia:

/* icon fonts */
@font-face {
	font-family: 'podcastpedia';
	src:url('fonts/podcastpedia.eot?ezbxqx');
	src:url('fonts/podcastpedia.eot?#iefixezbxqx') format('embedded-opentype'),
		url('fonts/podcastpedia.woff?ezbxqx') format('woff'),
		url('fonts/podcastpedia.ttf?ezbxqx') format('truetype'),
		url('fonts/podcastpedia.svg?ezbxqx#podcastpedia') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'podcastpedia';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
	content: "\e600";
}

The @font-face rule allows you to load and use your “own” custom fonts, that might not be installed on the user’s computer. You have to include the font file on the web server(via the src:url font descriptor) , and it will be automatically downloaded  to the user when needed.

Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

2.1. Font formats

As you can see, based on the file extension, there are several font formats included:

Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

TrueType Fonts (TTF)
TrueType is an outline font standard developed by Apple and Microsoft in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. It has become the most common format for fonts on both the Mac OS and Microsoft Windows operating systems.

SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

Note: The Web Open Font Format (WOFF) is a W3C recommendation…

2.2. Pseudo-elements

A very nice way to include the icon fonts in a web page is by the using  the CSS pseudo-elements :before and :after, which can be used to insert some content before, respectively after, the content of an element.

For example the broadcast icon font in the logoBroadcast font icon

is inserted with the help of the pseudo element :after. This is applied to the logo hyperlink element , which has a class of icon-podcast :

<a href="/" class="icon-podcast"><span id="logo_title">Podcastpedia.org</span></a>
.icon-podcast:after {
	content: "\e609";
	color: #DF7401;
}

I use the same procedure (could be :before ) to insert the other icon fonts present on Podcastpedia.org

3. The result

Please visit the website Podcastpedia.org to see the icon fonts in action. They are present in menu, social icons, feed icon etc. :Font icons on Podcastpedia.org

Note: Not only the looks of the webiste got better, but there was also an increase of performance results on Google PageSpeed Insights

4. Conclusion

As a conclusion I would like to mention I am very happy right now with the icon fonts and I would like to mention some of the benefits of using icon fonts :

  • they scale well (big advantage in responsive design )
  • you can easily change their color
  • you can easily add shadows to their shapes
  • can have transparent knockouts
  • don’t require individual HTTP requests
  • have good support in browsers
  • you can do all the other stuff image based icons can do, like change opacity, rotation etc.

Thank you for sharing and connecting with us.

Octocat Source code for this post is available on Github - podcastpedia.org is an open source project.

5. RESOURCES

Podcastpedia image

Adrian Matei

Creator of Podcastpedia.org and Codingpedia.org, computer science engineer, husband, father, curious and passionate about science, computers, software, education, economics, social equity, philosophy - but these are just outside labels and not that important, deep inside we are all just consciousness, right?

How to redirect domain to www url with nginx

Snippet from nginx config file that redirects all requests (http and https) to the www URL Continue reading