Comment puis-je utiliser fontello de la police?

Selon une source, c'est la façon dont j'utilise Fontello polices:

Maintenant, il est trivial de faire une icône personnalisée webfont, exactement à vos besoins. Tout d'abord, sélectionnez les icônes que vous souhaitez. Puis mettre à jour le glyphe de codes (en option), et de télécharger votre webfont bundle. Fontello génère tout ce dont vous avez besoin, puis vous télécharger le bundle via ce module de configuration de la page! C'est facile!

D'accord. Maintenant ce qui? Comment puis-je invoquer l'une de leurs icônes sur ma page web?

InformationsquelleAutor Nancy Collier | 2013-06-25
  1. 87

    À l'intérieur du paquet, il y a "police" et un dossier "css" du dossier.

    1. Déplacer le dossier des polices dans votre projet. Votre projet pourrait ressembler à quelque chose comme ceci:

      /projet-de la racine 
-- /feuilles de style 
-- /images 
-- /javascripts 
-- /police

    2. Inclure la Fontello css. À l'intérieur de la "css" dans le dossier bundle, vous verrez:

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

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

    3. À l'intérieur de [yourfontname].css est le @font-face règle que les importations de la police. Assurez-vous que les chemins d'accès aux polices sont pointant vers la droite endroit. Par défaut, ils vont chercher dans ../font/.

    4. À utiliser vos icônes, ajouter class="icon-ICON_NAME" à un élément que 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 attend de vous que vous utilisez l'icône avec le texte, mais parfois vous pourriez vouloir autonome icône. J'aime utiliser <i> tags autonome, pour les icônes, j'ai donc ajouter la règle suivante pour le bas de la fontello css:

      j'[class^="icon"]:avant, j'[class*=" icon"]:before { 
margin: 0; 
}

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

    • Merci pour ces descriptive réponse -- a vraiment aidé à débuter avec fontello
    • je vous recommande de garder la structure originale des dossiers comme est. Simplifier les prochaines mises à jour - il suffit de owerride dossier avec les fichiers mis à jour. Aussi, si vous avez des actifs pipeline utilisation *-codes.css et le lieu fontface dans vos sources avec le bouton droit de la police des chemins. Qui va vous protéger de l'édition après chaque police de mise à jour.
    • Qu'est-ce que la prise en charge du navigateur pour le CSS à l'étape 5?
    • href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" >developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors prise en charge du Navigateur est très bonne, IE7 et jusqu'
    • Ne peux pas croire que leur aide ne fait pas de vous montrer comment utiliser les polices de votre projet web.
    InformationsquelleAutor Ronen Ackerman