Comment installer et utiliser Font Awesome sur son forum

par **Shadow** le Ven 24 Avr 2015 - 12:06

Comment installer et utiliser Font Awesome sur son forum

Ce tutoriel explique comment installer et utiliser Font Awesome sur son forum Forumactif.

Font Awesome, c'est quoi?

Font Awesome c'est un set de plus de 350 icones qui peuvent être affichées à l'aide de classes CSS ou par un simple copier-coller sur son forum.

Les icônes Font Awesome sont utilisées par un très grand nombre de sites web, Forumactif compris. Voici donc un tutoriel pour les installer sur son propre forum! Mr. Green

Installer Font Awesome

L'installation de Font Awesome est possible par deux méthodes. La première requiert l'accès aux templates et donc d'être le fondateur du forum, la deuxième se fait par ajout d'un code javascript et est accessible à tous les administrateurs.

Méthode 1: Installation par les templates

Pour installer Font Awesome via les templates, rendez-vous dans Panneau d'administration > Affichage > Templates > Général puis modifiez le template overall_header edit

Puis allez ici et copier le code fourni par MaxCDN:

Copiez le code suivant dans le <head> du code HTML de votre site:
Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Dans le template overall_header, trouvez ce bout de code {T_HEAD_STYLESHEET} et juste avant, copier le code de MaxCND.

Vous devriez obtenir quelque chose comme cela:

Code:: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> {T_HEAD_STYLESHEET}

Une fois cela copié, sauvegardez et publiez le template. Font Awesome est installé! \o/

Méthode 2: Installation par javascript

Cette méthode est plus rapide et plus facile que l'installation via les templates et est accessible aux membres ayant le statut d'administrateur.
Pour l'installer, rendez-vous dans Panneau d'Administration > Modules > Gestion des codes Javascript et créez un nouveau script:

Titre: FontAwesome
Placement: Sur toutes les pages

Puis copier le code suivant:

Code:: (function() { var FA = '{FA_CSS}', a = document.createElement('LINK'); a.rel = 'stylesheet'; a.type = 'text/css'; a.href = FA; document.getElementsByTagName('HEAD')[0].appendChild(a); })();

Modifications:

Pour cette méthode, une modification est à faire au script précédent. Cliquez ici et copier l'adresse dans l'attribut href puis collez-là à la place de {FA_CSS}.

Code:: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Voici ce que vous devriez avoir:

Code:: var FA = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',

Sauvegardez, et Font Awesome est installé!

Informations sur Font Awesome

Maintenant que Font Awesome est installé sur votre forum, voici quelques exemples pour l'utiliser sur votre forum (en anglais).

Et voici une liste des icônes de Font Awesome qui peuvent être copiées dans votre CSS ou directement dans les messages (voir le prochain point): Font Awesome cheatsheet

Exemples d'utilisation de Font Awesome sur un forum Forumactif

Voici quelques façons d'utiliser Font Awesome sur son forum, que ce soit via CSS, dans les messages ou dans du code HTML.

1. CSS Pseudo-Élément

Par exemple, je souhaite ajouter l'icône fa-link à ma barre de navigation. Ceci est possible en copiant le lien de l'icone de l'aide-mémoire (cheatsheet) donné précédemment et en le copiant comme valeur de la propriété content. Enfin, il faut également définir comme police (font-family) FontAwesome pour que les icônes s'affichent correctement.

Voici le code correspondant:

Code:: a.mainmenu:before, a.mainmenu::before { content:""; font-family:FontAwesome; }

Remarque: Vous pouvez ajouter jusqu'à deux pseudo-éléments sur un élément en utilisant ::before et ::after.
Dans l'exemple ci-dessus on utilise :before et ::before car depuis CSS3 :before est devenu ::before (de même pour :after) pour une meilleure distinction entre pseudo-éléments et pseudo-classes. Il est préférable d'indiquer les deux pour une meilleure prise en charge par les plus anciens navigateurs.

Voici un autre exemple d'utilisation des pseudo-élément CSS. Cette fois nous allons utiliser ::before et ::after pour superposer deux icônes! La deuxième icône doit avoir pour la propriété position, une valeur absolute, donc il faut s'assurer que l'élément auquel vous appliquez ceci a un position relatif ou autre que fixe.

Dans cette exemple, on place l'icone fa-user et fa-circle-o à gauche du lien Membre sur la barre de navigation. Ce qui nous donnera ceci:

Et le code correspondant:

Code:: a.mainmenu[href="/memberlist"] { position:relative } a.mainmenu[href="/memberlist"]:before, a.mainmenu[href="/memberlist"]::before { content:""; color:#666; font-family:FontAwesome; font-weight:normal; font-size:13px; margin:0 10px; } a.mainmenu[href="/memberlist"]:after, a.mainmenu[href="/memberlist"]::after { content:""; color:#999; font-family:FontAwesome; font-weight:normal; font-size:24px; position:absolute; left:5px; top:-6px; }

Pour placer une icône à côté d'un lien spécifique, il faut utiliser le sélecteur [attribute] (plus d'infos)). Dans l'exemple, on sélectionne a.mainmenu seulement avec la valeur de /memberlist ( [href="/memberlist"] ).

2. Utiliser Font Awesome dans des messages

Les icônes Font Awesome peuvent également être utilisées dans les messages. Pour cela il faut simplement ajouter Font Awesome aux polices de l'éditeur en ajoutant un script dans Panneau d'Administration > Modules > Gestion des codes Javascript.

Titre : SCEditor FontAwesome
Placement: Toutes les pages

Copiez ce code et enregistrez:

Code:: $(function(){ if (!$.sceditor) return; $.sceditor.defaultOptions.fonts += ',FontAwesome'; });

Ceci ajoutera Font Awesome à la liste des polices de l'éditeur. Pour insérer des icônes, sélectionnez la police sur l'éditeur, choisissez et copiez une icône de la cheatsheet entre les balises BBcode de la police Font Awesome.

Une fois insérée, l'icône devrait s'afficher à la prévisualisation et à l'envoi:

Code:: [font=FontAwesome][color=#FF0000][/color][/font] Joyeux anniversaire! [font=FontAwesome][color=#990099][/color][/font]

3. Utiliser Font Awesome en HTML

Si vous n'avez pas encore consulter la cheatsheet celle-ci vous fournira les icônes, le nom de leur classe et leur Unicode. En HTML, on peut utiliser le nom de la classe et l'élément <i>.

Warning

Attention: Si vous utilisez une page HTML sans le haut et le bas de page de votre forum, il faudra ré-installer Font Awesome en copiant le lien de MaxCDN (voir plus haut) entre les balises <head></head>.

Exemple:

Ceci peut être appliqué dans un widget ou dans n'importe quelle partie acceptant le code HTML.

Code:: <style type="text/css">a.example-fa { font-size:12px; font-weight:bold; display:block; margin:3px 0; } a.example-fa i { width:30px; text-align:center; }</style> <a class="example-fa" href="#"><i class="fa fa-car"></i>Cars</a> <a class="example-fa" href="#"><i class="fa fa-truck"></i>Trucks</a> <a class="example-fa" href="#"><i class="fa fa-motorcycle"></i>Motorcycles</a>

Voici un autre exemple en créant une page HTML sans le haut et le bas de page de votre forum. Ici, en utilisant les classes fa-spinner et fa-spin on pourra créer une icône de chargement qui tourne.

Pour voir le rendu, c'est ici et pour reproduire cette page, il faut créer une nouvelle page HTML:

Panneau d'Administration > Modules > Gestion des codes HTML, créez une nouvelle page:

Voulez-vous utiliser le haut et le bas de page de votre forum ?: Non
Utiliser cette page en tant que page d'accueil ?: Non

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loading...</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <link href="http://illiweb.com/fa/favicon/discussion.ico" rel="shortcut icon" type="image/x-icon"/> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <style type="text/css">body{color:#FFF;font-size:12px;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;background:#39C}#loader{text-align:center;position:fixed;top:0;left:0;right:0;bottom:0;border-top:50px solid #333;border-bottom:50px solid #333}#content{height:100px;margin-top:-50px;position:absolute;top:50%;left:0;right:0}</style> </head> <body> <div id="loader"> <div id="content"> <i class="fa fa-spinner fa-spin fa-5x"></i> <p>Loading please wait...</p> </div> </div> </body> </html>