web-dev-qa-db-fra.com

Comment configurer les icônes de la Fondation Zurb?

J'ai téléchargé les fichiers de polices d'icônes de la Fondation Zurb http://zurb.com/playground/foundation-icon-fonts-

Je les ai décompressés et j'ai placé le dossier/foundation-icons dans mon dossier/css. Est-ce correct? J'essaie de suivre la section "Comment les utiliser" de la documentation et je n'arrive pas à comprendre comment commencer à utiliser les classes.

Je fais cela dans mon .html pour appeler les classes.

<a class=".fi-social-facebook">Facebook</a>

je suppose donc que je ne dois pas configurer/configurer correctement la police de mon fichier.

Mise à jour : Voici à quoi ressemble mon répertoire ... je le référence
et voici comment j'appelle la classe.

<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>

Snapshot

csscss3iconszurb-foundationcss-frameworks
26
Beast_Code

Les icônes de la fondation utilisent le <i> Mots clés. Vous auriez donc quelque chose comme <i class="fi-social-facebook"></i><a href="http://facebook.com">Facebook</a>.

Dans le Zip que vous avez téléchargé, il y a un fichier preview.html. Ouvrez-le dans votre éditeur et regardez-le. Cela aura un peu plus de sens.

De plus, leur fichier CSS ne comprend pas de tailles. Ainsi, lorsque vous utilisez leurs exemples pour modifier la taille (ex. <i class="fi-calendar size-24"></i>), rien ne changera. En regardant leur fichier preview.html, ils avaient ces tailles définies dans l'en-tête. Je les ai donc copiés et mis dans mon CSS et résolu le problème. Les voici si vous souhaitez les utiliser:

.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
24
Todd

Une fois le pack téléchargé, vous devez ajouter à votre <head>:

 <link rel="stylesheet" href="css/foundation-icons.css" />

Et assurez-vous que le dossier svgs à l'intérieur de votre dossier css et le reste des fichiers à l'intérieur de votre dossier css aussi.

Lorsque vous avez terminé cette configuration, essayez ceci sur votre html:

<i class="fi-star"></i>

Il devrait imprimer une étoile.

Solution la plus rapide, aucune installation requise:

<link rel="stylesheet" 
      href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>

Autres versions disponibles sur https://cdnjs.com/libraries/foundicons

20
ManelPNavarro

J'ai installé via pip install Django-zurb-foundation et rencontrait le même problème …/foundation/icons a fonctionné, mais je n'ai pas pu les référencer dans mon projet actuel. Ce qui a fini par fonctionner pour moi, c'est d'ajouter ce qui suit à mon projet base.html

{% load foundation_tags %}

{% block css %}
{% foundation_css 'foundation-icons' %}
{% endblock css %}

Ce qui est en fait la même chose que la réponse de ManelMusti , mais gérée dans le modèle en utilisant la même technique que l'exemple dans …/site_packages/foundation/templates/foundation/icons.html

5
ob1quixote

La bonne façon est <i class="fi-star"></i> au lieu de <i class="ft-star"></i>

4
ManelPNavarro