Cannot view the source image file on a website

Question

http://www.wordherd.co/#features

On this site, when I try to look at the source image file of any of the icons (like \"Directions\") using Firebug, it displays some

Answer 1

These "images" are icons fonts. They are usually added via :before/:after pseudo elements. In this instance, the content value is an ASCII representation of an external font library character.

.icon-flag:before {
    content: "\f024";
}

In order for this to work, you would need to change the element's font-family property to reference the external font library. In your case, the font library is FontAwesome.

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
}

Using the Font-Awesome library, you could simply add an icon like this:

<i class="fa fa-stack-overflow"></i>

Since it's treated like font, you can increase the size of it using the CSS property font-size. (example)

.fa-stack-overflow {
    font-size:30px;
    color:orange;
}