blog alpha design joomla

Le blog d' Alpha Design Joomla et autres ...

Comment ajouter une Icône aux liens de menu de Joomla

Valentin Garcia est l'auteur de l'article How to Add Icons to Joomla Menu Links dont la traduction est autorisée par  ostraining.com font awesome menu

Beaucoup de templates Joomla offre la possibilité d'ajouter une icône à un élément de menu.

Si votre template ne possède pas cette fonctionnalité, nous avons la solution.

Continuez de lire cet article pour savoir comment ajouter les icônes de Font Awesome à vos liens de menu. 

1. Télécharger & installer NS Font Awesome

  • Rendez-vous sur la page de NS Font Awesome page et téléchargez cette extension.

font awesome menu 1

  • Connectez-vous à l'administration de Joomla
  • Rendez-vous dans Extensions > Gérer
  • Cliquez sur le bouton Choisir un fichier & sélectionnez le fichier zippé que vous venez juste de télécharger puis cliquez sur le bouton Envoyer & Installer

2. Activer le plugin NS Font Awesome

  • Rendez-vous dans Extensions > Plugins  
  • Recherchez le plugin "System - NS Font Awesome" et activez le.

font awesome menu 2

Ce plugin chargera les fichiers qui sont nécessiares pour que Font Awesome fonctionne sur votre site.

3. Téléchargez et Installez RokCandy

 Pour ajouter des icônes, il faut ajoute la balise <i>, cependant Joomla ne permet pas de l'ajouter directement dans le titre du lien de menu. Nous avons besoin de RokCandy pour "leurrer" Joomla.

  • Rendez vous sur la page RokCandy , cliquez sur le bouton Download , dans le popup qui s'ouvre sélectionnez le bouton Download sur la ligne RokCandy Extension pour le télécharger.
  • Installez le : Extension > Gérer ...font awesome menu 3

4. Créez une macro avec RokCandy

  • Rendez-vous dans Composants > RokCandy > Macros

font awesome menu 4

  • Cliquez sur le bouton Nouveau

font awesome menu 5

Pour le champ Macro saisissez :

[icon]{icon}[/icon]

Pour le champ HTML saisissez :

<i class="fa {icon}"></i>

font awesome menu 6

Et pour finir cliquez sur le bouton Enregistrer & Fermer 

5. Utilisez la macro dans un lien de menu

Rendez-vous dans Menu > Votre menu > Votre lien de menu

Dans mon exemple, j'ajoute l'icône utilisateur près du texte Contact  avec le code suivant :

[icon]fa-user[/icon] Contact

 font awesome menu 7

Dans l'exemple ci-dessus, fa-user est la classe pour visualiser l’icône utilisateur. Pour savoir quelles classes d' icônes sont disponibles, consulter la liste sur le site du développeur de Font Awesome

  • Rendez-vous dans l'onglet Paramètres d'affichage de la page 
  • Saisissez un Titre dans le navigateur : votre élément de menu sans la macro

 font awesome menu 8

  • Cliquez sur Enregistrer & Fermer

6. Vérification

Visitez votre site pour voir l’icône ajouté :

font awesome menu 9

Ils nous ont fait confiance

Universités & organismes de recherche

L' INSERM - unité U999, Université Paris Sud - Centre Chirurgical Marie Lannelongue

The Center for Groundwater Studies - Australie

L 'ENSAE : École Nationale de la statistique et de l'administration

La Maison des Sciences de l'Homme Paris Nord , UMS de l'université Paris 8, de l'université Paris 13 et du CNRS

L' Institut Supérieur de Développement - ISD Flaubert

Monpellier RIO imaging (MRI), plate - Forme Technologique (PFT), labellisée IBiSA.

CNRS - INEE  Le Laboratoire d'Excellence Dispositif de Recherche Interdisciplinaire sur les Interactions Hommes-Milieux (LabEx DRIIHM)

Organismes publics

Ministère de la défense : État Major de la 3ème Brigade Mécanisée

La mairie de la ville de Marly le Roi

La mairie de la ville de Breuillet

La mairie de la ville de Thuir

L' Agence Locale de l'Energie de la métropole marseillaise

L' Institut de Formation en Masso-kinésithérapie de Montpellier - Centre Hospitalier Universitaire de Bellevue

Le Centre de Gestion de la fonction Publique Territoriale des Alpes de Haute Provence

La Capitelle - couveuse d'entreprises du Gard

Le Centre Social Intercommunal de Saint Quentin de la Poterie

Le collège & lycée Saint Charles

Le lycée Philippe Lamour

Le centre François Baclesse: Centre de Lutte Contre le Cancer (CLCC)

L' Etablissement Régional de Formations des Professions Paramédicale du Groupement d'Intérêt Public des Etablissement de Santé d'Avignon et du pays de Vaucluse

Entreprises

Astrium une filiale EADS No 1 européen et No 3 mondial de l'industrie spatiale

Messer France

Photonlines

Shânti Gestion

App-Line

Vincent et Mireille

Axiom Information

Galerie Art City

Le Château de Boisson

LM Control

Vagabonde International

Photonlines Energy

la Pisciculture la Croisière

FHSolution

NaturEditions

Etudions à l'étranger

E.P.A.

Microeconomix

Alatak

Jade Black Design

Une bague une destinée

Schmulb

Espace revêtements

Partenaire de réussite

Stylitek

Fun-Kart

The Crew Coach

Sanitval

Ateliers d'écriture de Virginie Lou

cam4you

SDB+

Armelle Bongrain - architecte d'intérieur

ECIM

Riveria Expat Consultants

Florence Thorez - Diététicienne Nutritionniste

Le Séchoir

Le Moulin de Bouydou

L' Espace de Formation Clinique et Psychanalytique

Cours de musique à Montpellier

Leads Planet

Agerix

Etudions à l'étranger

Biopreserv

Aloes RED

InfoTour

EverNew

Synalabs

Bureau d'Etudes Arlaud

Stage de musique été

Fermetures Neuvillaises

Linguapolis

Weblligence

ASD Protect

Véronique Crépaux

Françoise Léon

Inovtolerie

BlueSafe

Viasocial

Repco Marine

King Jouet

Dr Abbas

ER3M

Cryo'net

Vectoring Talents

Desir d'écrire

Dr Girardin

Installation yperreault

Viaortho

Viadentiste

Alice Sweet Home

Cannes property services

La méthode Silva

Les outils du mieux être

Pinceaux et Camaïeux

Viacoach

ASH Conciergerie

MC Coaching Pro

Argos communication 

Cpsforma

Hervé Graille - Architecte 

Adrien Baguet - Architecte

Ingelic

Coach du bonheur

ONG / Associations

UNESCO: International Music Council

L' Association de Recherche en Soins Infirmiers

L' Union Internationale Contre la Tuberculose et les maladies respiratoires

Le Centre National des Risques Industriels

L' Institut International des Hautes Études en Psychanalyse

SurdiFrance : Association nationale de malentendants

La fondation Internationale de l'Hôpital Albert Scmhweitzer à Lambaréné

La Maison des Professions Libérales Ile de France

Le Conseil National de l' Enseignement Agricole Privé

La ligue Dauphiné Savoie de tennis

Le Conseil Permanent Régional des Associations d’Environnement

Le Syndicat des Podologues d'Île de France

La compagnie aux grands pieds

L' Espace de l'Ouest Lyonnais

Les Courants d'Airs

Nîmes Volley Ball

Le Club photo de Saint-Laurent-du-Var 

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour notamment réaliser des statistiques de visites