无法在网站上查看源图像文件 [英] Cannot view the source image file on a website

问题描述

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

在这个网站上，当我尝试使用Firebug查看任何图标（如路线）的源图像文件时，它会显示某种内容的unicode。

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.

推荐答案

这些图片是图标字体。它们通常通过：之前 / ：之后伪元素添加。在这种情况下，内容值是外部字体库字符的ASCII 表示形式。

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

为了这个工作，你需要更改元素的 font-family 属性来引用外部字体库。在您的情况下，字体库是 FontAwesome 。

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

使用 Font-Awesome library ，您只需添加如下图标：

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

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

由于它被视为字体，你可以使用CSS属性 font-size 。 （示例）

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

这篇关于无法在网站上查看源图像文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！