fonts
Czcionki ikon
Szukaj…
W tym czcionka ikony na stronie internetowej
Aby dołączyć czcionkę ikony do CSS, możesz dołączyć następujący kod:
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
Korzystanie z czcionki ikony na stronie internetowej
Aby użyć ikony w kodzie HTML, możesz wykonać każdą z następujących czynności:
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
Jeśli chcesz wybrać metodę 7, potrzebujesz dodatkowego kodu CSS. Ten kod CSS wyglądałby tak:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Czcionki ikonowe , takie jak Iconic , Font Awesome lub Glyphicons zazwyczaj używają metody 7. To, aby uniknąć konieczności kopiowania i wklejania znaków specjalnych z ściągawki lub zmuszania do używania encji HTML.
Jest to jednak metoda, która ma kilka wad. Przede wszystkim wymaga obsługi selektora :before CSS i użycia sekwencji specjalnej dla znaków UNICODE. Ani IE6-7, ani niektóre wersje Webkit nie zapewniają tej obsługi.
Kolejną wadą jest to, że musisz użyć osobnego znacznika HTML dla każdej ikony, przy czym każdy znacznik odpowiada jednemu znakowi z czcionki ikony. Wyświetlanie kilku ikon w znaczniku HTML nie jest możliwe w przypadku metody 7, w przeciwieństwie do innych metod.
Inne metody mają jednak swoje wady. Metody 1, 3 i 5 wymagają skopiowania i wklejenia znaku z ściągawki lub użycia środków do umieszczenia znaku w kodzie. Twój edytor kodu może nie być w stanie wyświetlić tego znaku lub może wyświetlać inny znak niż ten w twojej czcionce ikony, jeśli czcionka ikony używa niestandardowego odwzorowania tego znaku.
Metody 1, 3 i 5 wymagają również, aby Twoja przeglądarka używała odpowiedniego kodowania, aby wyświetlać poprawny znak. W przypadku znaków UNICODE nie jest to tak oczywiste, jak w przypadku znaków ASCII. Należy to jednak zapewnić, dodając metatag <meta charset="utf-8" /> gdzieś w head dokumentu HTML.
Metody 2, 4 i 6 nie wymagają kopiowania i wklejania znaku, ale to czyni kod mniej czytelnym dla ludzi i sprawia, że wszelkie zmiany w kodzie są bardziej podatne na błędy ludzkie. Ponadto, ponieważ musisz wyszukać kod encji HTML dla każdej ikony, której chcesz użyć, lub będziesz musiał je zapamiętać. Chociaż to samo oczywiście dotyczy również klas używanych w metodzie 7, klasy te są znacznie łatwiejsze do zapamiętania niż kod encji HTML.
Umieszczanie określonego symbolu na stronie internetowej
Rozważ trójkąt skierowany w dół.
Istnieje kilka prawidłowych sposobów wyświetlania tego symbolu na stronie internetowej.
Metoda 1: użyj dziesiętnej jednostki HTML
HTML:
▼
Metoda 2: użyj szesnastkowej encji HTML
HTML:
▼
Metoda 3: użyj znaku bezpośrednio
HTML:
▼
Metoda 4: użyj CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
Każda z tych trzech metod powinna mieć takie same wyniki. W przypadku innych symboli istnieją te same trzy opcje. Niektóre mają nawet czwartą opcję, pozwalającą na użycie referencji opartej na łańcuchach znaków (np. ♥ do wyświetlenia ♥).
Możesz skorzystać z referencyjnej witryny internetowej, takiej jak Unicode-table.com, aby znaleźć ikony obsługiwane w UNICODE i kody, z którymi odpowiadają. Na przykład wartości trójkąta skierowanego w dół znajdują się na stronie http://unicode-table.com/en/25BC/ .
Pamiętaj, że te metody są wystarczające tylko w przypadku ikon, które są domyślnie dostępne w każdej przeglądarce. W przypadku symboli takich jak ☃, ❄, ★, ☂, ☭, ⎗ lub ⎘ jest to znacznie mniej prawdopodobne. Chociaż możliwe jest zapewnienie obsługi w różnych przeglądarkach innych symboli UNICODE, musisz uzyskać czcionkę ikony lub utworzyć własną. Zobacz Tworzenie własnej czcionki, aby uzyskać więcej informacji na temat tworzenia własnej czcionki.
Popularne czcionki ikon
Poniżej znajduje się lista popularnych czcionek ikon: