Original Article on http://alt-web.com/TUTORIALS/?id=highlight_icons

The beauty of font based icons is that you can style them exactly as you would any other font with CSS color, size, borders, gradients, shadows, transitions...  Font icons re-scale nicely in responsive layouts. And unlike images, font icons have a very small footprint which means you can use a lot of them for social media and web based applications without slowing down your web pages.  If you're new to font icons, take a few minutes to get familiar with them at the links below.

 

Glyphicons - apple, ban-circle, map-marker:

Glyphicons-screenshot.jpg

Font Awesome - apple, ban, map-marker:

Fontawesome-screenshot.jpg

 

HTML:

To get started, add Glyphicons and Font Awesome links to your document's <head> tag.

NOTE: Glyphicons are included in Bootstrap CSS version 3x but not in version 4.

 

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

 

Notice the slight syntax difference. Glyphicons are wrapped in <span> tags while Font Awesome icons are wrapped in <i> tags.

 

<h3>Glyphicons:</h3> 
<ul class="list-inline"> 
     <li><span class="glyphicon glyphicon-apple"></span></li> 
     <li><span class="glyphicon glyphicon-ban-circle"></span></li> 
     <li><span class="glyphicon glyphicon-map-marker"></span></li>
</ul> 

<h3>Font Awesome Icons:</h3> 
<ul class="list-inline"> 
     <li><i class="fa fa-apple"></i></li> 
     <li><i class="fa fa-ban"></i></li> 
     <li><i class="fa fa-map-marker"></i></li> 
</ul>


 

Dreamweaver Screenshots:

 

Applying multiple classes to a <span> tag:

 

Applying multiple classes to an <i> tag:

 

CSS:

Add the following CSS code to your custom stylesheet.  Feel free to experiment with different values.

 

.glyphicon {
     padding: 2%;
     color: rgba(255,255,255,1.0);
     font-size: 156px;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     text-shadow: -1px 1px 2px #333;
     cursor:pointer;
}

.glyphicon:hover, 
.glyphicon:active, 
.glyphicon:focus {text-shadow: 2px 3px 15px blue;}

.fa {
     padding: 2%;
     color: rgba(255,255,255,1.0);
     font-size: 156px;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     text-shadow: -1px 1px 2px #333;
     cursor:pointer;
}

.fa:hover,
.fa:active,
.fa:focus {text-shadow: 2px 3px 15px blue;}




 

And there you have it. Hope you enjoyed this brief demonstration with font icons. 

 

By Nancy O'Shea, ACP / Web Developer

Web Site: http://alt-web.com