In this modern age web designers can now use Vector Icons / Web Fonts to scale to any size instead of having to resize normal icons with loss of clarity. This simple code, which assumes you have embeded the Font Awesome libraries (CSS and JS) as required.

This tecnique will work with other icon fonts and I am just using Font Awesome because it installed on my site and is very popular.

You can use font icons either in block or inline elements.

CSS

/* Display Icon Font */

.fu-icon-wrapper i[class*="fa"] {
	font-size: 36px;
	display: block;
	color: #000;
}

HTML

<!-- Block Element -->
<div class="fu-icon-wrapper"><i class="fa fa-map-marker"></i> Block Element</div>	

<!-- Inline Element -->
<span class="fu-icon-wrapper"><i class="fa fa-map-marker"></i> Inline Element</span>