fonts
Ikon typsnitt
Sök…
Inklusive ett ikonteckensnitt på en webbsida
För att inkludera ett ikonteckensnitt i ditt CSS kan du inkludera följande 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
}
Använda ett ikonteckensnitt på en webbsida
Om du vill använda en ikon i din HTML kan du göra något av följande:
<!-- 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>
Om du vill välja metod 7, behöver du ytterligare CSS-kod. Den här CSS-koden ser ut så här:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Ikon typsnitt som Ikoniska , Font Awesome eller Glyphicons använder vanligtvis metod 7. Detta för att undvika att du behöver kopiera och klistra in specialtecken från ett fuskark eller tvingas använda HTML-enheter.
Det är dock en metod som har flera nackdelar. Först och främst kräver det stöd för :before CSS-väljaren och användningen av en escape-sekvens för UNICODE-tecken. Varken IE6-7 eller vissa versioner av Webkit ger detta stöd.
En annan nackdel är att du måste använda en separat HTML-tagg för varje ikon, där varje tagg motsvarar ett tecken från ikonteckensnittet. Att visa flera ikoner i HTML-taggen är inte möjligt med metod 7, till skillnad från andra metoder.
Andra metoder har dock sina egna nackdelar. Metoderna 1, 3 och 5 kräver att du kopierar och klistrar in tecknet från ett fuskslag eller använder medel för att sätta tecknet i din kod. Din kodredigerare kanske inte kan visa tecknet eller så kan den visa en annan karaktär än den i din ikontypsnitt om ikonteckensnittet använder en icke-standardiserad kartläggning av det tecknet.
Metoderna 1, 3 och 5 kräver också att din webbläsare använder rätt kodning för att visa rätt tecken. För UNICODE-tecken är detta inte lika uppenbart som för ASCII-tecken. Detta bör dock säkerställas genom att lägga till metataggen <meta charset="utf-8" /> någonstans i head på ditt HTML-dokument.
Metoderna 2, 4 och 6 kräver inte att du kopierar och klistrar in karaktären, men den gör din kod mindre läsbar av människor och gör några ändringar i koden mer benägna att mänskliga misstag. Eftersom du måste leta upp HTML-enhetskoden för var och en av de ikoner du vill använda eller så måste du memorera dem. Även om det samma uppenbarligen gäller för de klasser som används i metod 7, är dessa klasser mycket lättare att memorera än en HTML-enhetskod.
Inklusive en specifik symbol på en webbsida
Tänk på en nedåtpekande triangel.
Det finns flera korrekta sätt att visa denna symbol på en webbsida.
Metod 1: använd decimal HTML-enhet
HTML:
▼
Metod 2: använd hexidecimal HTML-enhet
HTML:
▼
Metod 3: använd tecken direkt
HTML:
▼
Metod 4: använd CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
Var och en av dessa tre metoder bör ha samma utgång. För andra symboler finns samma tre alternativ. En del har till och med ett fjärde alternativ, så att du kan använda en strängbaserad referens (t.ex. ♥ att visa ♥).
Du kan använda en referenswebbplats som Unicode-table.com för att hitta vilka ikoner som stöds i UNICODE och vilka koder de motsvarar. Till exempel hittar du värdena för den nedåtpekande triangeln på http://unicode-table.com/sv/25BC/ .
Observera att dessa metoder endast är tillräckliga för ikoner som är tillgängliga som standard i varje webbläsare. För symboler som ☃, ❄, ★, ☂, ☭, ⎗ eller ⎘ är det mycket mindre troligt att detta är fallet. Även om det är möjligt att tillhandahålla stöd för andra webbläsare för andra UNICODE-symboler, måste du skaffa ett ikonteckensnitt eller skapa en av dina egna. Se Skapa ditt eget teckensnitt för mer information om hur du skapar ditt eget teckensnitt.
Populära ikonteckensnitt
Följande är en lista med populära ikonteckensnitt: