web-dev-qa-db-fra.com

Comment utiliser les polices fontello?

Selon une source, voici comment j'utilise les polices Fontello:

Il est maintenant trivial de créer une icône de police Web personnalisée, exactement pour vos besoins. Sélectionnez d'abord les icônes que vous aimez. Mettez ensuite à jour les codes de glyphe (facultatif) et téléchargez votre ensemble de polices Web. Fontello génère tout ce dont vous avez besoin, puis vous téléchargez le bundle via la page de configuration de ce module! C'est si facile!

D'accord. Maintenant quoi? Comment invoquer l'une de leurs icônes sur ma page Web?

font-facewebfontsfontello
29
Nancy Collier

A l'intérieur du bundle, il y a un dossier "font" et un dossier "css".

  1. Déplacez le dossier de polices dans votre projet. Votre projet pourrait ressembler à ceci:

    /project-root▶ .____. 

  2. Inclure le CSS Fontello. A l'intérieur du dossier "css" du bundle, vous verrez:

    [yourfontname] -codes.css 
 [yourfontname] -embedded.css 
 [yourfontname] -ie7-codes.css 
 [yourfontname] -ie7.css 
 [yourfontname] .css

    Dans la plupart des cas, vous n'aurez besoin que de [yourfontname].css. Incluez cette feuille de style dans votre projet.

  3. À l'intérieur [yourfontname].css est le @font-face règle qui importe la police. Assurez-vous que les chemins d'accès aux polices pointent au bon endroit. Par défaut, ils chercheront dans ../font/.

  4. Pour utiliser vos icônes, ajoutez class="icon-ICON_NAME" à un élément pour lequel vous souhaitez avoir une icône. Vous pouvez voir la liste des noms d'icônes au bas de [yourfontname].css.

  5. Facultatif: Fontello met un margin-right: .2em sur l'icône car il s'attend à ce que vous utilisiez l'icône avec du texte, mais parfois vous voudrez peut-être une icône autonome. J'aime utiliser <i> balises pour les icônes autonomes, j'ajoute donc la règle suivante au bas du CSS Fontello:

    i [classe ^ = "icône -"]: avant, i [classe * = "icône -"]: avant {
 marge: 0; 
}

    Maintenant, si vous mettez class="icon-ICON_NAME"sur un <i> tag, il n'aura pas de marge indésirable.

85
Ronen Ackerman