Czcionki ikon: jak one działają?

Rozumiem, że czcionki ikon to tylko czcionki i że możesz uzyskać ikony, po prostu dzwoniąc do ich nazwy klasy, ale jak działają czcionki ikon?

Próbowałem sprawdzić powiązane zasoby czcionek ikon załadowane w Chrome, aby zobaczyć, jak czcionki ikon wyświetlają ikony (w porównaniu do czcionek ogólnych), ale nie byłem w stanie dowiedzieć się, jak to się dzieje.

Nie udało mi się również znaleźć zasobów na temat sposobu wykonywania tej „techniki czcionek ikon”, mimo że dostępnych jest mnóstwo czcionek ikon . Istnieje również wiele zasobów pokazujących, jak można zintegrować czcionki ikon , ale wydaje się, że nikt nie udostępnia ani nie pisze o tym, jak to się robi!

Glify to obrazy, a nie czcionka. Wszystkie ikony znajdują się w obrazku sprite (dostępne również jako pojedyncze obrazy) i są dodawane do elementów jako ustawione backround-images:

Rzeczywiste ikony czcionki ( FontAwesome , na przykład) nie wiąże się pobieranie czcionki specyficzne i skorzystać z contentwłasności, na przykład:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Ponieważ ta contentwłaściwość nie jest obsługiwana w starszych przeglądarkach, używają one również obrazów .

Oto przykład całkowicie surowego FontAwesome używanego jako czcionka, zamieniającego ( - możesz tego nie widzieć!) W karetkę: http://jsfiddle.net/GWqcF/2

Jeśli Twoje pytanie dotyczy tego, jak klasa CSS może wstawić określony znak (który zostanie wyrenderowany jako ikona w specjalnej czcionce), spójrz na źródło FontAwesome :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Tak więc do wstawienia znaku używana jest dyrektywa CSS (która pochodzi ze specjalnego zastrzeżonego obszaru Unicode do użytku prywatnego, który nie zepsuje innych czytelników).

Jak działają ikony czcionek internetowych?

Ikony czcionek internetowych działają za pomocą CSS w celu wstrzyknięcia określonego glifu do kodu HTML za pomocą właściwości content. Następnie używa @font-facedo załadowania czcionki internetowej dingbat, która stylizuje wstrzykiwany glif. W rezultacie ten wstrzyknięty glif staje się pożądaną ikoną.

Aby rozpocząć, potrzebujesz pliku czcionki internetowej z potrzebnymi ikonami, zdefiniowanymi dla określonych ASCIIznaków (A, B, C, !, @, #, etc.)lub w obszarze prywatnego użytku czcionki Unicode, czyli spacjami w czcionce, które nie będą używane przez określone znaki w Czcionka zakodowana w Unicode.

Przeczytaj więcej na temat tworzenia ikon czcionek internetowych w Responsive Webfont Icons .