Comment installer et utiliser Font Awesome sur son forum

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

Installer et utiliser Font Awesome sur son forum

Cette astuce explique comment installer et utiliser Font Awesome sur son forum Forumactif.

Sommaire :

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 :

Voir illustration :

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 !

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

	La modification des templates n'est pas une opération à prendre à la légère. Elle requiert, au minimum, de bonnes connaissances du langage HTML. En outre, seul le fondateur du forum est habilité à en modifier les templates.

Citation :: Panneau d'administration  Affichage  Templates  Général, overall_header

Editez le template overall_header en cliquant sur la roue crantée ;
Recherchez la ligne suivante (CTRL + F) : {T_HEAD_STYLESHEET} ;
Collez le code ci-dessous juste avant la ligne contenant la variable {T_HEAD_STYLESHEET}.

Code:

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

N’oubliez pas de publier le template en cliquant sur Ajout

.

Méthode 2: Installation par javascript

Citation :: Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "FontAwesome" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:: document.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">');

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Informations sur Font Awesome

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.

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 :

Comment installer et utiliser Font Awesome sur son forum Captur10

Citation :: Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS)

Voici le code correspondant :

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

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder vos modifications.

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 :

Comment installer et utiliser Font Awesome sur son forum Captur11

Citation :: Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS)

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;
}

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder vos modifications.

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"] ).

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 :

Citation :: Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "SCEditor FontAwesome" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

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

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Utiliser Font Awesome dans des messages

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 :

Voir illustration :

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

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>. 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 donné (voir le point 2.1) entre les balises <head></head>.

Exemple :

Comment installer et utiliser Font Awesome sur son forum Captur12

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.

Citation :: Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML

Cliquez sur Créer une nouvelle page HTML et choisissez de ne pas utiliser le haut et le bas de votre forum. Sur cette page HTML, insérez le code suivant :

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>Changerment en cours...</title>
<meta charset="utf-8" />
<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>Chargement en cours ! <br />Merci de bien vouloir patienter...</p>
</div>
</div>
</body>

</html>