Comment installer et utiliser Font Awesome sur son forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Comment installer et utiliser Font Awesome sur son forum

Message 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.

Comment installer et utiliser Font Awesome sur son forum Copy-c10 Sommaire :

  1. Font Awesome, c'est quoi ? ;
  2. Installer Font Awesome ;
  3. Informations sur Font Awesome ;
  4. Exemples d'utilisation de Font Awesome sur un 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 :

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.

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

  1. Editez le template overall_header en cliquant sur la roue crantée edit ;

  2. Recherchez la ligne suivante (CTRL + F) : {T_HEAD_STYLESHEET} ;

  3. 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


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

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

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 :

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.

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>

Comment installer et utiliser Font Awesome sur son forum 14-03-11




 Voir aussi le tutoriel ajouter un bouton Awesome sur l'éditeur.

Shadow

Shadow
Modéractive
Modéractive

Féminin
Messages : 24354
Inscrit(e) le : 30/03/2007

Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum