Comment afficher les polices d'icônes sur les pages Web? Style d'affichage de police d'icône en HTML

L'utilisation de la police d'icônes pour générer des icônes a les avantages suivants par rapport aux icônes basées sur l'image:

1. Taille de changement gratuite

2. Modifiez librement la couleur

3. Ajouter un effet d'ombre

4.ie6 peut également le soutenir

5. Soutenez les autres propriétés des icônes d'image, telles que la transparence et la rotation, etc.

6. Vous pouvez ajouter des attributs tels que Text-Stroke et Background-Clip: Texte tant que le navigateur le prend en charge.

Modification du texte:

<h3>

<span aria-hidden = true data-icon = & # x21dd;> </span>

Statistiques

</h3>

[Data-Icon]: avant {

Font-Family: Icônes; / * Font icône BYO, mappé intelligemment * /

Contenu: att (Data-icon);

parler: aucun; / * À ne pas faire confiance, mais bon. * /

}

Icône individuelle:

<a href = # class = icon-alone>

<span aria-hidden = true data-icon = & # x25a8;> </span>

<span class = screen-leader-text> rss </span>

</a>

/ * Même CSS que ci-dessus, plus * /

.Icon-Alone {

Affichage: bloc en ligne; / * Chrome 19 était bizarre avec la clickabilité sans ce * /

}

.Screen-leader-text {/ * réutilisable, TOLBOX TUME DE CLASSE * /

Position: absolue;

En haut: -9999px;

Gauche: -9999px;

}

Si vous avez besoin de créer votre propre iconfont, il est recommandé d'utiliser l'iconon. En utilisant, vous pouvez générer la police d'icône dont vous avez besoin en téléchargeant SVG ou FONTS. Cet article est une démonstration en ligne à l'aide d'iconMoon pour générer.

Veuillez visiter la démonstration en ligne pour voir les résultats. J'espère que vous aimez la police de l'icône. Si vous pensez que l'icône n'est pas assez fluide, vous pouvez envisager d'utiliser Cufon pour le traitement, afin que l'icône générée soit plus belle.

Source: http://www.gbin1.com/technology/css/20120827-icon-font-usage/