Font-awesome, des icones gratuits utilisables facilement

Le service gratuit Font Awesome est accessible nativement sur le thème Smart d'e-monsite. Cela permet de placer des icones très facilement sur votre site. Un recours au langage HTML est toutefois nécessaire, mais un copier/coller suffira à faire votre bonheur. Nous allons voir dans les grandes lignes comment utiliser ce système de génération d'icones sur ce thème Smart d'e-monsite (ems-framework).

 

Font awesome
Capture d'écran du site fontawesome.io

Un exemple d'utilisation pour ce site, c'est les petites icones d'info dans les contenus. Par exemple sur la page Menu horizontal pour le thème Smart:

Cochez cette case si vous souhaitez que le menu reste fixé en haut de la fenêtre lors du défilement de la page 

A part la class permettant de placer entre autre la bordure en pointillé, le code ajouté pour l'icone a été copié depuis le site Font Awesome.
Un ajustement en CSS permet également de placer le fond bleu sur cette icone.

Le code HTML est :



Cochez cette case si vous souhaitez que le menu reste fixé en haut de la fenêtre lors du défilement de la page

Modifier la taille et la couleur

La couleur de l'icone fontawesome

Sur fontawesome vous trouverez beaucoup d'icones mais au seul format 1x. Sur le Thème Smart vous pourrez modifier la taille et/ou la couleur de ces icones en CSS.

Prenons par exemple cet icone d'information :

Il est de base avec le i blanc sur fond noir : http://fontawesome.io/icon/info-circle/

Pour changer sa couleur, je place la règle CSS suivante :


.fa-info-circle{
    color: rgba(119, 170, 177, 1);  
}

La couleur peut être renseignée, comme à l'habitude en Rgba ou en Hexadéceimal (ou en anglais (red par exemple)).

La taille de l'icone fontawesome

Plusieurs tailles sont disponibles pour ces icones. Comme ce sont des "polices de caractères", nous utiliserons font-size en CSS.

Exemple :   (http://fontawesome.io/icon/bug/)

Toutes les tailles disponibles sont accessibles sur ce site : http://fr.ems-framework.com/pages/base-css.html

.fa-4x : 





.fa-10x: 





Liste à puce et fontawesome

Allez, voyons une fonctionnalité avancée. Une liste à puce, des icones à la place des puces, toussa.

Cette section requiert l'usage de plusieurs fonctionnalités avancées, et de HTML pour la dernière

  • Numéro 1
  • Numéro 2
  • Numéro 3
  • Etc 4

C'était une liste à puces. C'est pas moche, c'est pas beau / c'est classique.


Voici une liste à puces, sans puces, pour le fun 

  • Numéro 1
  • Numéro 2
  • Numéro 3
  • Etc 4
1
2
3
4
5
6
7
8
9
.puce-perso li{
list-style-type: none;
}

J'ai placé ma class personnalisée : 'puce-perso', puis j'y ai ajouté des personnalisations graphiques.

J'ai utilisé ce style : avec Fontawesome !

  • Numéro 1
  • Numéro 2
  • Numéro 3
  • Etc 4

Utilisation d'une image

  • Numéro 1
  • Numéro 2
  • Numéro 3
  • Etc 4

Ici en CSS j'ai placé ceci : 

1
2
3
4
5
6
7
8
9
.puce-perso li{
    list-style-type: none;
}
.puce-perso-liste li::before {
    content: url(/medias/files/yeah.png);
    margin-right: 5px;
    width: 50%;
}

Tous les détails sur : http://fr.ems-framework.com/pages/base-css.html (tout en bas de page).

Plus d'options à venir.