2013-09-24 9 views
6

http://www.wordherd.co/#featuresNie można wyświetlić plik obrazu źródłowego na stronie

Na tej stronie, kiedy próbuję spojrzeć na plik źródłowy obrazu jedną z ikon (na przykład „Directions”) za pomocą Firebug, wyświetla jakiś unicode dla treści.

Jak dostać się do plików ze zdjęciami źródłowymi? Próbuję zrozumieć hack, którego używają, aby uniemożliwić dostęp do obrazów.

+4

nie wiem dlaczego wy umieścić ten zawieszone .. Głosowałem, aby go otworzyć ponownie, ponieważ jest ** nie ** ogólne pytanie obliczeniowa sprzętu/oprogramowania. To naprawdę dobre pytanie. –

+2

Obraz jest przechowywany zasadniczo jako ciąg. Nie sądzę, że to jest zbyt ogólne. –

+2

Głosowałem również za ponownym otwarciem. Przyjęta odpowiedź w zasadzie dowodzi, że jest to dobre pytanie. Sugestia do @platypus: zmień tytuł na "Nie można wyświetlić obrazu źródłowego, jak działają ikony czcionek?" –

Odpowiedz

9

Te "obrazy" są czcionkami ikon. Są one zwykle dodane za pomocą pseudoelementów :before/. W tym przypadku content value is an ASCII reprezentacja zewnętrznego znaku biblioteki czcionek.

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

Aby to działało, trzeba byłoby zmienić wskazanego elementu font-family właściwość odwołać zewnętrzną bibliotekę czcionek. W twoim przypadku biblioteka czcionek to FontAwesome.

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

Używanie Font-Awesome library, można po prostu dodać ikonę tak:

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

Ponieważ jest to traktowane jak czcionki, można zwiększyć rozmiar nim za pomocą właściwości CSS font-size. (example)

.fa-stack-overflow { 
    font-size:30px; 
    color:orange; 
} 
Powiązane problemy