Highlight Icons with Text-Shadows

Mouseover or tap icons to see the effect.

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:

http://glyphicons.bootstrapcheatsheets.com/

Font Awesome Icons:

http://fortawesome.github.io/Font-Awesome/icons/

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:

glyphicons

Applying multiple classes to an <i> tag:

font-awesome icons

Add CSS code below into your custom stylesheet. Feel free to experiment with 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;
}

That's all there is to it. Hope you enjoyed this brief demonstration with font icons.

Custom Web Design & Development