Comment installer et utiliser Font Awesome sur son forum
Page 1 sur 1 • Partagez
Comment installer et utiliser Font Awesome sur son forum
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! ![]() Installer Font AwesomeL'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 templatesPour installer Font Awesome via les templates, rendez-vous dans Panneau d'administration > Affichage > Templates > Général puis modifiez le template overall_header ![]() Puis allez ici et copier le code fourni par MaxCDN: ![]()
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: ![]()
Une fois cela copié, sauvegardez et publiez le template. Font Awesome est installé! \o/ Méthode 2: Installation par javascriptCette 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:
![]() 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}. ![]()
Voici ce que vous devriez avoir:
Sauvegardez, et Font Awesome est installé! Informations sur Font AwesomeMaintenant 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 ForumactifVoici 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émentPar 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:
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:
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 messagesLes 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:
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: ![]()
3. Utiliser Font Awesome en HTMLSi 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>. ![]() Exemple: ![]() Ceci peut être appliqué dans un widget ou dans n'importe quelle partie acceptant le code HTML.
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
Pour plus d'informations: site internet de Font Awesome (en anglais). |
Font Awesome a été créé par Dave Gandy. Ce tutoriel a été rédigé par Ange Tuteur et a été traduit par Vivi How to install and use Font Awesome Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI. |
Shadow- Modéractive
-
Messages : 24353
Inscrit(e) le : 30/03/2007
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum