fonts
Pictogramlettertypen
Zoeken…
Een pictogramlettertype op een webpagina opnemen
Om een pictogramlettertype in uw CSS op te nemen, kunt u de volgende code opnemen:
@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
}
Een pictogramlettertype op een webpagina gebruiken
Om een pictogram in uw HTML te gebruiken, kunt u elk van de volgende dingen doen:
<!-- 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>
Als je voor methode 7 wilt kiezen, heb je wat extra CSS-code nodig. Deze CSS-code ziet er als volgt uit:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Pictogramlettertypen zoals Iconic , Font Awesome of Glyphicons maken meestal allemaal gebruik van methode 7. Dit om te voorkomen dat u speciale tekens van een spiekbriefje moet kopiëren of gedwongen wordt HTML-entiteiten te gebruiken.
Het is echter een methode die verschillende nadelen heeft. Allereerst vereist het ondersteuning voor de :before CSS-selector en het gebruik van een escape-reeks voor UNICODE-tekens. Noch IE6-7 noch bepaalde versies van Webkit bieden deze ondersteuning.
Een ander nadeel is dat je voor elk pictogram een afzonderlijke HTML-tag moet gebruiken, waarbij elke tag overeenkomt met één teken uit het pictogramlettertype. Het weergeven van verschillende pictogrammen in HTML-tags is niet mogelijk met methode 7, in tegenstelling tot andere methoden.
Andere methoden hebben echter hun eigen nadelen. Methoden 1, 3 en 5 vereisen dat je het personage kopieert en plakt uit een spiekbriefje of dat je middelen gebruikt om het personage zelf in je code te plaatsen. Uw code-editor kan het teken mogelijk niet weergeven of het kan een ander teken weergeven dan het lettertype in uw pictogramlettertype als het pictogramlettertype een niet-standaardafbeelding van dat teken gebruikt.
Methoden 1, 3 en 5 vereisen ook dat uw browser de juiste codering gebruikt om het juiste teken weer te geven. Voor UNICODE-tekens is dit niet zo vanzelfsprekend als voor ASCII-tekens. Dit moet echter worden gewaarborgd door de metatag <meta charset="utf-8" /> ergens in de head van uw HTML-document toe te voegen.
Methoden 2, 4 en 6 vereisen niet dat u het teken kopieert en plakt, maar het maakt uw code minder leesbaar voor mensen en maakt wijzigingen in de code vatbaarder voor menselijke fouten. Omdat u de HTML-entiteitscode moet opzoeken voor elk van de pictogrammen die u wilt gebruiken, moet u ze onthouden. Hoewel hetzelfde duidelijk van toepassing is op de klassen die ook in methode 7 worden gebruikt, zijn die klassen veel gemakkelijker te onthouden dan een HTML-entiteitscode.
Inclusief een specifiek symbool op een webpagina
Overweeg een naar beneden wijzende driehoek.
Er zijn verschillende juiste manieren om dit symbool op een webpagina weer te geven.
Methode 1: gebruik een decimale HTML-entiteit
HTML:
▼
Methode 2: gebruik een hexidecimale HTML-entiteit
HTML:
▼
Methode 3: gebruik het teken rechtstreeks
HTML:
▼
Methode 4: gebruik CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
Elk van deze drie methoden moet dezelfde output hebben. Voor andere symbolen bestaan dezelfde drie opties. Sommige hebben zelfs een vierde optie, zodat u een op snaren gebaseerde referentie kunt gebruiken (bijv. ♥ om ♥ weer te geven).
U kunt een referentiewebsite zoals Unicode-table.com gebruiken om te zoeken welke pictogrammen worden ondersteund in UNICODE en met welke codes ze overeenkomen. U vindt bijvoorbeeld de waarden voor de naar beneden wijzende driehoek op http://unicode-table.com/en/25BC/ .
Merk op dat deze methoden alleen voldoende zijn voor pictogrammen die standaard in elke browser beschikbaar zijn. Voor symbolen zoals ☃, ❄, ★, ☂, ☭, ⎗ of ⎘ is dit veel minder waarschijnlijk. Hoewel het mogelijk is om browseroverschrijdende ondersteuning te bieden voor andere UNICODE-symbolen, moet u een pictogramlettertype verkrijgen of een eigen lettertype maken. Zie Uw eigen lettertype maken voor meer informatie over het maken van uw eigen lettertype.
Populaire pictogramlettertypen
Hieronder volgt een lijst met populaire pictogramlettertypen: