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 sort of unicode for the content.

How do you get to the source image files? I'm trying to understand the hack they are using to prevent the images from being accessible.

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;
}