Intégrer des icones dans vos codes - Facile - Lyxiae

Bonjour ! Aujourd'hui, on va parler icônes !

Peut-être avez vous déjà rencontré sur divers designs des icônes implantés via le code. C'est à dire que ces icônes réagissent comme des lettres et non des images. Ces icônes aux différents styles sont très intéressantes pour leur rapidité de chargement et leur versatilité du point de vue de leur utilisation en code.

Je peux vous proposer trois sources différentes pour ces icônes que vous pouvez utiliser à la fois dans vos designs de forums et vos codes de fiches de présentation, de rp, ou bien de liens. Fontawesome, Ion Icons et Honeybee.

FontAwesome

FontAwesome est probablement la premiere source apparue sur les forums. La liste d'icons qu'ils proposent est assez grande mais attention, seule une partie est libre d'accès gratuitement. Pour utiliser toutes les variantes possibles de chaque icône, il faut payer. Cependant, le catalogue gratuit est déjà très vaste et il y a de quoi trouver son bonheur.

Pour utiliser FontAwesome, il faut s'inscrire. Une fois l'inscription faite, vous obtiendrez la balise permettant de lier le catalogue FontAwesome dans vos codes. Il s'agit d'une balise script, ce qui implique que vous ne pourrez pas l'intégrer dans vos codes pour messages si le forum ou vous postez n'a pas installé les icônes FontAwesome dans leurs templates. En cherchant bien sur google vous devriez trouver les anciens liens en CSS mais malheureusement, comme ils ne sont pas à jour vis à vis du catalogue du site de FontAwesome, il sera compliqué d'obtenir les bonnes balises pour vos icônes.

Le lien script qui est donné est à insérer dans le template overall_header, entre les balises head.

Pour choisir une icône, il vous suffit de vous rendre dans le catalogue "icons", cliquer sur celle qui vous intéresse, puis sur "start using this icon". Un pop-up apparaîtra et vous donnera la balise à copier.

Pour styliser l'icône en CSS, il vous suffira d'utiliser les class de ces balises.

IonIcons :

Autre système d'icons assez répandu, IonIcons a cela d'intéressant qu'il est déjà installé sur les versions ModernBB et AwesomeBB des forums ForumActif et est utilisé dans le design de base. Vous n'aurez donc pas besoin d'installer le catalogue de ces icônes si votre forum est sur une de ces versions. Néanmoins, si vous avez besoin de lier le catalogue sur un autre forum ou que vous êtes sous phpBB2/3, punbb ou Invision, vous pouvez trouver le lien sur la page Usage du site ionicons.

Le lien link qui est donné est à insérer dans le template overall_header, entre les balises head.

Pour IonIcons il n'est pas nécessaire de s'inscrire, et les sons se présentent sous deux formes différentes, material et iOS, vous proposant deux styles différents pour vos icons qui peuvent etre utilisees pour le web ou les applications Android ou iOS.

La stylisation de vos Icons fonctionne de la même manière que pour FontAwesome, en utilisant les class de la balise comme sélecteur.

Pour choisir les icons, il vous suffit de cliquer dessus, récupérer le "name" de l'icon et l'insérer dans votre balise sous les formats suivants :


Pour une icon "material"

Code:

<i class="icon ion-md-nomicon"></i>

Pour une icon "iOS"

Code:

<i class="icon ion-ios-nomicon"></i>

Pour une icon "logo" (la catégorie en bas du catalogue)

Code:

<i class="icon ion-logo-nomicon"></i>

Les versions iOS ne fonctionnant pas toujours en web sur ForumActif, veillez à essayer les versions material quand c'est possible.

Honeybee :

Honeybee est un catalogue très flexible et facile d'utilisation. Il est également en perpétuelle évolution et entièrement gratuit.
Tout comme IonIcons, son installation se fait par lien CSS ce qui permet de l'utiliser à la fois en design de forum via les templates. Le lien link qui est donné est à insérer dans le template overall_header, entre les balises head.

Les icons HoneyBee sont utilisables de deux façons différentes. En HTML, comme FontAwesome et IonIcons, via une balise span sous le format suivant :

Code:

<span class="th th-nomdelicone"></span>

Il vous suffit de mettre le nom de l'icon inscrit juste en dessous de l'icon dans le catalogue.

Ou bien vous pouvez utiliser la méthode en CSS en utilisant un pseudo élément :before sur votre bloc selon le modèle suivant :

Code:

NOMDELACLASS/ID:before{
content:'codeicon';
font-family:'honeybee';
/* vous pouvez ajouter tout le css que vous voulez pour styliser l'icon */
}

Dans ce cas, c'est le code de l'icon (situé en dessous de son nom dans le catalogue) qu'il faudra insérer dans la propriété "content". Attention a bien penser à déclarer la font-family "honeybee".


Ces icons fonctionnent toutes sur le même principe de police. C'est à dire que pour gérer la taille de l'icon, il vous suffit de passer par la propriété font-size. Pour gérer la couleur, les ombres, etc, ce sont les propriétés CSS liées aux textes qui s'appliqueront à vos icones.