Protiviti / SharePoint Blog

SharePoint Blog

August 11
Fonts or Icons? Font Icons.

Icon fonts can be an essential tool to any UI Designer. Think Dingbats but for the modern web. Icon fonts are not only simple to implement, but load quicker than images, can be re-sized and colored like normal text fonts and can be created based on images. Along with these obvious advantages to using them, there are some less obvious qualities that developers appreciate. Icon fonts do not require JavaScript, so there is no need to be concerned with compatibility issues. They also play nice with almost any framework, are fully able to be manipulated by CSS and are completely free for commercial use.

 
_____________________________________________________________________________________
 
How to implement Font Awesome:
1.       Paste the following link into the <head> of the HTML page:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
2.       Choose which icon you’d like to use
3.       Place the “i tag” with the specific icon you want in the spot you’d like the icon. For example:
<i class="fa fa-camera-retro"></i>
 
The tag above has the class “fa-camera-retro” on it, which would print  on the page.
 
_____________________________________________________________________________________
 
Along with choosing a specific font icon you want to use, there are classes you can add to any of the icons that add certain effects. These effects are built-in, but you can always use CSS to color, precisely size, move icons. Some examples below:
                fa-2x, fa-3x, fa-4x, fa-5x : increases icon sizes relative to their container
                fa-fw : sets a fixed width on the icon
                fa-ul and fa-li : replaces default bullets in unordered lists
                fa-spin : gets any icon to rotate (not supported by IE8 or 9)
 
Examples of Font Awesome in action:
 
 
 
 
 

Quick Launch


© Protiviti 2019. All rights reserved.   |   Privacy Policy