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.

I don't know why you guys put this on hold.. I voted to reopen it, as it is **NOT** a general computing hardware/software question. It's actually a really good question. — Josh Crozier, Sep 24 '13 at 22:39
The image is held essentially as a string. I don't think this is too generalized. — Travis J, Sep 24 '13 at 22:43
I voted for reopening, too. The accepted answer basically proves that it is a good question. Suggestion to @platypus: change the title to "Cannot view the source image, how do icon fonts work?" — Reinout van Rees, Sep 24 '13 at 23:08

score 9 · Accepted Answer · edited May 23 '17 at 12:16

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

Cannot view the source image file on a website

1 Answers1

Linked