Les icones de Zurb | Foundation Icon Fonts

Sur votre site responsive Bootstrap créé sur e-monsite, il est possible d'utiliser les Glyphicons qui embarqués nativement dans le thème Bootstrap. Vous pouvez aussi insérer les icones de Zurb University : Foundation Icon Fonts 3.

Zurb propose l'utilisation gratuite de 283 icones, voyons comment les installer sur le site.

Installer les icones de Foundation Icon Fonts 3 sur votre site

1.1 Installer les fichiers de Foundation Icon Fonts 3 sur votre PC

Dans un premier temps, rendez-vous sur le site Zurb University : Foundation Icon Fonts 3 et téléchargez le fichier en cliquant sur Download the Font.

Le fichier en un .rar avec deux dossiers. Un pour les utilisateurs de MAC iOS et un pour les autres (sous Windows ou Linux donc). Choisissez le fichier qui correspond à votre équipement (au besoin regardez derrière votre écran pour voir si une pomme croquée est présente ou non - celle-là c'est cadeau).

Etant sous Windows, je sélectionne le second dossier et l'extrais :

Extraire les fichiers

 

1.2 Téléchargez les fichiers sur votre espace de stockage

Ne vous occupez pas du dossier "svgs" dans le dossier extrait de Foundation Icon Fonts 3.

Sélectionnez les fichiers :

  • eot
  • woff
  • ftt
  • svg

Fichiers a telecharger

1.3 Modifier le fichier CSS de Foundation Icon Fonts 3

Le fichier "foundation-icons" avec la roue crantée est le fichier CSS à modifier. Il faut remplacer les emplacements des 4 fichiers à charger. Le .eot y figure deux fois avec la ligne .eot?#iefix"

En gros ajoutez juste l'URL de votre site (ici http://red-fish-red-syndrome.e-monsite.com) et l'emplacement /medias/files/ devant le foundation-icons.eot (par exemple).

Le fichier de base :

Fichier css foundation icon fonts 3 par defaut

Le fichier modifié :

Fichier css foundation icon fonts 3 modifie

1.4 Télécharger le fichier CSS modifié

Il est préférable de conserver une copie du fichier par défaut et donc de renommer avant enregistrement le fichier CSS.

Une fois le fichier CSS modifié, vous pourrez le télécharger dans l'espace de stockage Fichiers puis récupérer son URL.

Un appel de ce fichier doit être placer dans les zones éditables de votre site. Ici dans Configuration - Réglages - Zones éditables et dans la section Balises meta supplémentaires placer cette ligne de code avec l'URL de votre fichier CSS :

<link href="http://red-fish-web-syndrome.e-monsite.com/medias/files/fif-2.css" rel="stylesheet">

 

Utiliser les icones de Foundation Icon Fonts 3 sur votre site

2.1 Ajouter le code CSS pour les icones Zurb dans la personnalisation de l'apparence

Voici un fichier .txt contenant le code CSS à placer dans la personnalisation de l'apparence :

Personnalisation css de fifPersonnalisation css de fif (6.58 Ko)

 

2.2 Insérer les icones Zurb sur vos contenus

Pour insérer les icones de Zurb Foundation, utilisez simplement le code <span><i class="fi-[nom de l'icone]"></i></span>

Exemples d'insertion d'icones:

 <span><i class="fi-unlock"></i></span>

 <span><i class="fi-flag"></i></span>

 <span><i class="fi-checkbox"></i></span>

 <span><i class="fi-guide-dog"></i></span>

Attention toutefois, le <span> contenant l'icone doit être dans un paragraphe - par exemple - pour que cela fonctionne.

2.3 Ajouter des styles à vos icones Foundation Icon Fonts 3

Il est possible d'ajouter dans la personnalisation de l'apparence une infinie de style pour ces icones (utilisable de la même façon que pour les glyphicons).

La class du style doit être placée à la suite de la première class avec uniquement un espace :

 <span><i class="fi-puzzle style31"></i></span>

Voici quelques exemples (dont certains repris sur le site de Zurb University | Foundation Icon Font 3). C'est sur cette page aussi que vous trouverez les différentes icones disponibles.

L'icone non modifiée

Icone avec un style "surbrillance"

.style31 {
    color: #FD6C9E;
    font-size: 8em;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FD6C9E, 0 0 30px #FD6C9E, 0 0 40px #FD6C9E, 0 0 50px #FD6C9E, 0 0 75px #FD6C9E;}

Icone moyen et violet

.style4 {
    color: #a9014b;
    font-size: 70px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);}

Icone moyen et vert

.style1 {
    font-size: 70px;
    color: #B8D30B;}

Si vous avez des questions ou des remarques, n'hésitez pas à utiliser le champ commentaires ci-dessous.

Commentaires (1)

Aziz
  • 1. Aziz | 21/10/2017
Merci bcps il est génial ton tuto. Il m'a fait gagner bcps de temps

Ajouter un commentaire