Unable to view source image file on 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 (for example, "Directions") using Firebug, it displays some unicode for the content.

How do you get into the original image files? I am trying to understand what they use to prevent access to images.

Answer 1

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

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

For this to work, you will need to change the element font-family property to reference the external font library. In your case, the FontAwesome font 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 can simply add an icon similar to this:

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

Since it is treated as a font, you can increase its size using the CSS font-size property. (example)

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