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
– Josh Crozier, Commented Sep 24, 2013 at 22:39
The image is held essentially as a string. I don't think this is too generalized. — Travis J
– Travis J, Commented Sep 24, 2013 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
– Reinout van Rees, Commented Sep 24, 2013 at 23:08

Community · Accepted Answer · 2017-05-23 12:16:59Z

9

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

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Sep 24, 2013 at 1:22

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot view the source image file on a website

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related