• Centre de formation Joomla!
    Tutoriels et formation Joomla!
    Apprenez en vous formant à votre rythme, en toute liberté,
    créez votre propre site Web avec Joomla!

Tutoriel Logo Joomla Joomla

Ajouter la Font Awesome à son template Joomla

Apparues il y a quelques années, les icônes comme Font Awesome connaissent un succès grandissant et mérité. Si certains templates les proposent maintenant nativement, ce n'est pas encore le cas de tous les templates en circulation. Au travers de ce tutoriel, nous allons voir comment ajouter la Font Awesone à votre template..

Table des matières
- Installation
- Utilisation

 

Comme son nom l'indique, la Font Awesome est bien une police, c'est à dire que vous pouvez facilement changer la couleur et la taille avec un peu de code CSS. Cependant le point le plus important à retenir est que ces icônes sont des fichiers vectoriels qui conservent leur aspect quelque soit l'appareil sur lequel ils sont affichés (même sur les écrans de type Retina).

 

Installation

Plusieurs solutions sont disponibles pour intégrer la Font Awesome dans un template. Nous allons en voir 2 qui me semblent être parmi les plus simples à mettre en oeuvre.

Le code

Vous allez voir, il suffit juste d'ajouter une simple ligne de code dans votre template. Ouvrez le panneau d'administration puis sélectionnez "Extensions - Gestion des templates".

Google Joomla

Sur la gauche, cliquez d'abord sur "Template" (par défaut, vous arrivez sur l'onglet "Style") puis sur "Détail et fichiers" pour votre template.

Google Joomla

Cliquez sur le ficher "index.php" dans la liste proposée à gauche de l'écran.

Google Joomla

Avant la balise < /head > , ajoutez le code suivant :

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

Pensez à cliquer sur "Enregistrer et fermer".

 

Une extension tierce

Il existe des extensions qui permettent d'intégrer la Font Awesome directement dans votre site Joomla. Parmi celles-ci, je recommande le plugin NS Font Awesome qui est gratuite.

Ouvrez "Extensions - Gestion des extensions". Dans la barre de recherche, indiquez "NS Font Awesome" puis cliquez sur l'icône en forme de loupe.

Font Awesome Joomla

L'extension apparait, il vous suffit de cliquer dessus pour accéder à la prochaine étape. Cliquez ensuite sur "Installer" pour lancer le processus d'installation du plugin directement sur votre site.

Font Awesome Joomla

Un message vous confirme l'installation du plugin.

 

Utilisation

Vous pouvez maintenant utiliser la Font Awesome dans le contenu de votre site Joomla en respectant la syntaxe suivante :

<i class="fa fa-link"></i>

Pour plus de précision sur l'utilisation et la mise en oeuvre de la Font Awesome, vous pouvez vous reporter à la documentation officielle.


 

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.