Czcionki ikon: jak one działają?

87

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!

css web fonts icons icon-fonts Vivek Chandra
źródło

Odpowiedzi:

53

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:

Glify

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

James Donnelly
źródło
4
Ikony FontAwesome to czcionki. Wspomniałem nawet o FontAwesome w mojej odpowiedzi i powiedziałem, jak radzą sobie z przeglądarkami, które nie obsługują ich metody CSS polegającej na dodawaniu ikon do strony.
James Donnelly,
3
Ikony są znakami czcionki. Jako prymitywny przykład: litera „Z” mogłaby wyglądać jak walizka, zapisać ją jako czcionkę i wykorzystać na stronie internetowej.
James Donnelly,
1
Oto przykład całkowicie surowego FontAwesome w użyciu, zamieniającego się w karetkę: jsfiddle.net/GWqcF/2
James Donnelly
6
@VivekChandra tak, to prawda! :-) Czcionki ikon są takie same, jak każda inna czcionka, z wyjątkiem tego, że znaki są stylizowane na ikony. FontAwesome używa zakresu znaków zarezerwowanych do „użytku prywatnego” .
James Donnelly,
1
Niesamowite. Dzięki za wszystkie zasoby - zajmiemy się tym, teraz wszystko jest jaśniejsze.
Vivek Chandra,
23

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).

Thilo
źródło
2
Co oznacza ukośnik f?
CodyBugstein
5
Znak fnie jest jego częścią, jest to tylko liczba szesnastkowa 15. Lewy ukośnik rozpoczyna sekwencję ucieczki dla szesnastkowego punktu kodowego. \f004w CSS jest jak w HTML.
Thilo
11

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 .

artamonovdev
źródło