Không thể xem các tập tin hình ảnh nguồn trên một trang web

Question

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

Trên trang web này, khi tôi cố gắng nhìn vào các tập tin hình ảnh nguồn của bất kỳ các biểu tượng (như "Chỉ đường") sử dụng Firebug, nó sẽ hiển thị một số loại unicode cho nội dung.

Làm thế nào để bạn truy cập tệp hình ảnh nguồn? Tôi đang cố gắng để hiểu được hack họ đang sử dụng để ngăn chặn các hình ảnh có thể truy cập được.

Answer 1

"Hình ảnh" này là phông chữ biểu tượng. Chúng là thường là được thêm qua các yếu tố giả :before/:after. Trong trường hợp này, biểu diễn content value is an ASCII của ký tự thư viện phông chữ bên ngoài.

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

Để làm việc này, bạn cần thay đổi thuộc tính font-family của phần tử để tham khảo thư viện phông chữ bên ngoài. Trong trường hợp của bạn, thư viện phông chữ là FontAwesome.

[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
} 

Sử dụng Font-Awesome library, bạn chỉ có thể thêm một biểu tượng như thế này:

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

Kể từ khi nó được xử lý như font chữ, bạn có thể tăng kích thước của nó bằng cách sử dụng CSS tài sản font-size. (example)

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