fonts
Polices d'icône
Recherche…
Inclure une police d'icône sur une page Web
Pour inclure une police d'icône dans votre CSS, vous pouvez inclure le code suivant:
@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
}
Utiliser une police d'icône sur une page Web
Pour utiliser une icône dans votre code HTML, vous pouvez effectuer chacune des opérations suivantes:
<!-- 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>
Si vous souhaitez opter pour la méthode 7, vous aurez besoin d'un code CSS supplémentaire. Ce code CSS ressemblerait à ceci:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Les polices d'icônes telles que Iconic , Font Awesome ou Glyphicons utilisent généralement la méthode 7. Cela évite de copier-coller des caractères spéciaux d'un aide - mémoire ou d'utiliser des entités HTML.
C'est toutefois une méthode qui comporte plusieurs inconvénients. Tout d'abord, il nécessite la prise en charge du sélecteur :before CSS et l'utilisation d'une séquence d'échappement pour les caractères UNICODE. Ni IE6-7 ni certaines versions de Webkit ne fournissent ce support.
Un autre inconvénient est que vous devez utiliser une balise HTML distincte pour chaque icône, chaque balise correspondant à un caractère de la police de l'icône. L'affichage de plusieurs icônes dans la balise HTML n'est pas possible avec la méthode 7, contrairement aux autres méthodes.
D'autres méthodes ont cependant leurs propres inconvénients. Les méthodes 1, 3 et 5 exigent que vous copiez-collez le caractère d'une feuille de triche ou que vous utilisiez des moyens pour placer le caractère lui-même dans votre code. Votre éditeur de code peut ne pas être capable d'afficher le caractère ou il peut afficher un caractère différent de celui de votre police d'icônes si la police d'icône utilise un mappage non standard de ce caractère.
Les méthodes 1, 3 et 5 exigent également que votre navigateur utilise le codage approprié pour afficher le caractère correct. Pour les caractères UNICODE, ce n'est pas aussi évident que pour les caractères ASCII. Cela devrait cependant être assuré en ajoutant la balise <meta charset="utf-8" /> quelque part dans l'en- head de votre document HTML.
Les méthodes 2, 4 et 6 ne vous obligent pas à copier-coller le caractère, mais cela rend votre code moins lisible par les humains et rend toute modification du code plus sujette aux erreurs humaines. En outre, vous devrez rechercher le code d'entité HTML pour chacune des icônes que vous souhaitez utiliser ou vous devrez les mémoriser. Bien que la même chose s’applique évidemment aux classes utilisées dans la méthode 7 également, ces classes sont beaucoup plus faciles à mémoriser qu’un code d’entité HTML.
Inclure un symbole spécifique sur une page Web
Considérons un triangle pointant vers le bas.
Il existe plusieurs manières correctes d’afficher ce symbole sur une page Web.
Méthode 1: utiliser l'entité HTML décimale
HTML:
▼
Méthode 2: utiliser une entité HTML hexadécimale
HTML:
▼
Méthode 3: utiliser le caractère directement
HTML:
▼
Méthode 4: utiliser CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
Chacune de ces trois méthodes devrait avoir le même résultat. Pour les autres symboles, les trois mêmes options existent. Certains ont même une quatrième option, vous permettant d'utiliser une référence basée sur des chaînes (par exemple. ♥ pour afficher ♥).
Vous pouvez utiliser un site Web de référence comme Unicode-table.com pour trouver les icônes prises en charge par UNICODE et les codes avec lesquels elles correspondent. Par exemple, vous trouvez les valeurs pour le triangle pointant vers http://unicode-table.com/en/25BC/ .
Notez que ces méthodes ne sont suffisantes que pour les icônes disponibles par défaut dans chaque navigateur. Pour les symboles tels que ☃, ❄, ★, ☂, ☭, ⎗ ou ⎘, cela est beaucoup moins probable. Bien qu'il soit possible de fournir une prise en charge inter-navigateurs pour d'autres symboles UNICODE, vous devrez vous procurer une police d'icône ou créer la vôtre. Voir Création de votre propre police pour plus d'informations sur la création de votre propre police.
Polices d'icône populaires
Voici une liste des polices d'icônes populaires:
- Police génial
- Fontello
- Pictogrammes modernes
- Typicons
- Fontes de l'icône de fondation
- Pictonic
- Pictos