icons glyphs web design

Glyph Social Icons in Web Design

It’s becoming a new trend in web design to link to external resources including files and images. The main benefits of this is to lower server requests with less intensive resources to load, and to optimise the website speed.
Ofcourse we need to consider Google’s guidelines about this practise, but so far Google is all for linking to external resources so let’s try this with social icons.
Normally we’d use PNG image formats for social media icons. ¬†They’re already small in filesize but they are still small requests that we could improve.

Here’s a really easy way to get social icons on to your website – Greg of Cracking Comms actually introduced me to this technique, and I’ll be applying this method in future website developments.
Using glyphs instead of PNG, SVG or JPEG image formats. This way, it would render the icons as if they were text glyphs, and you can style them through simple CSS attributes!
https://fortawesome.github.io/Font-Awesome/icons/

Adding the following code into the header of your html code will allow you to add these icons:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Using the <i> tag, you can call any icon using Font Awesome's icons.
Example:  <i class="fa fa-google"></i>