Dans cet article, nous verrons comment insérer des icônes dans les éléments de menu du site Joomla afin que non seulement le titre soit affiché, mais également une icône à côté, symbolisant cet élément de menu. Je vous rappelle que je travaille avec le template Protostar. Et le matériel de cet article affecte les styles de ce modèle particulier. Mais, si un modèle différent est utilisé, ce n'est pas un fait que la recette ci-dessous sera inutile. ;)

Formulation du problème

Donc, nous avons le menu principal du site, que nous avons déjà déplacé vers l'en-tête du site et lui a même donné disposition horizontale. Il ressemble à ceci :

En général, le menu standard. Mais il n'y a pas d'individualité là-dedans, mais je le veux vraiment. =)

Par conséquent, après avoir vu sur d'autres sites qu'il est possible d'insérer des icônes dans les éléments de menu à côté de leurs noms, nous le ferons également sur notre site.

Gestionnaire de menus. Élément du menu. Onglet Options de lien

Afin de changer l'apparence de notre élément de menu, nous avons besoin du panneau d'administration Joomla, en particulier le " Options de lien", qui est disponible en " Gestionnaire de menus» lors de l'édition ou création d'un élément de menu. Nous allons travailler avec le champ "" comme indiqué sur l'image :

1. Insérez dans le champ le nom de l'icône que nous voulons voir dans l'élément de menu avant son nom, par exemple, icon-users
2. Mettez immédiatement un espace dans le champ " Titre du menu» (pour que l'icône ne se confonde pas avec le nom de l'élément de menu)
3. Enregistrez les modifications et voyez ce qui se passe

Le titre de l'élément de menu rampe vers le bas (il n'est pas situé horizontalement, mais verticalement)

Lors de la visualisation du résultat obtenu, tout semble déprimant. Bien que l'icône soit apparue dans l'élément de menu, le nom de l'élément de menu a rampé vers le bas, s'étirant dans un arrangement vertical une lettre à la fois :

Nous corrigeons la situation. Nous apportons l'élément de menu à une vue horizontale.

Je ne comprends toujours pas par quoi les créateurs du modèle Protostar ont été guidés et pourquoi un tel jambage apparaît. Une chose est claire : la propriété display de l'élément de menu est définie sur block , de sorte qu'il bloque et affiche chaque caractère, en les empilant les uns sous les autres. Et nous devons les étirer sur une ligne, ce qui signifie que la valeur de la propriété display doit être inline .

Pour ce faire, vous devez apporter des modifications au fichier template.css, qui se trouve dans le dossier template :

./templates/protostar/css/template.css

Ce tutoriel va vous montrer comment ajouter les icônes manquantes PoliceImpressionnantà un modèle Joomla 3.x.

Il manque peut-être certaines icônes à votre site. Cela est probable si une nouvelle version de la police FontAwesome a été publiée ou si le concepteur n'a ajouté que des icônes utilisées dans la démo du modèle.

Connectez-vous au serveur à l'aide d'un client FTP ou ouvrez le gestionnaire de fichiers du panneau de contrôle de l'hébergement (gestionnaire de fichiers cPanel) et recherchez le fichier templates/themeXXX/css/template.css.

Trouvez le dernier des codes d'icône FontAwesome dans template.css. Après cela, vous devez ajouter de nouvelles icônes, par exemple, l'icône fa-comments :



Ouvrez maintenant le fichier templates/themeXXX/less /font-awesome/font-awesome.css, recherchez le dernier élément de la liste d'icônes du fichier template.css dans le fichier que vous avez ouvert. Copiez tout le code sous cette icône (fa-comments dans notre cas) et collez ce code à la fin du fichier template.css.

Enregistrez vos modifications. Vous pouvez maintenant voir que les icônes sont affichées sur votre site :



Si, pour une raison quelconque, le fichier font-awesome.css est absent de votre modèle, ouvrez le fichier sur le site officiel de FontAwesome et copiez le code du fichier maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.cssà la fin de template.css.

De l'auteur : Je vous souhaite la bienvenue chers lecteurs. Dans cet article, nous parlerons d'un petit détail, mais en même temps utile, de tout bon site, une icône pour le CMS Joomla - favicon. Vous apprendrez à ajouter un favicon sur le site, ainsi qu'à en modifier un existant.

Pour ceux qui ne connaissent pas, un favicon est un petit favicon (icône) d'un site qui est affiché par un navigateur web dans un onglet juste avant le titre du site, ou pour être plus précis, avant le contenu de la balise title. Autrement dit, dans l'ensemble, il s'agit d'une image d'un certain format et d'une certaine taille avec l'extension ico.

Dans le même temps, vous conviendrez qu'un favicon correctement sélectionné confère au site un caractère unique et unique, et est également rapidement mémorisé par les utilisateurs. Les moteurs de recherche, lors de la génération d'une liste de résultats de recherche (une liste avec des résultats de recherche), affichent également un favicon avant le titre du site.

Ainsi, la première chose qui attire l'attention de l'utilisateur n'est que l'icône - l'icône du site, respectivement, cela ne vaut même pas la peine de dire que si l'utilisateur voit un ami parmi eux, cela le poussera à visiter le site. Par conséquent, la question de savoir comment changer le favicon dans joomla 3 est très populaire parmi les débutants, puis je vais essayer de donner une réponse détaillée.

Pour assurer la compatibilité entre navigateurs, lors de la création d'un favicon, en règle générale, ils choisissent le format d'image ico, car il est pris en charge par absolument tous les navigateurs. Bien que les navigateurs modernes prennent désormais en charge des formats tels que PNG et GIF, Mozilla FireFox prend également en charge JPEG et GIF animé. Mais, d'une manière ou d'une autre, certains utilisateurs utilisent des versions obsolètes de navigateurs Web, donc à mon avis, vous devriez toujours utiliser le format ico généralement accepté.

Après avoir décidé du format, découvrons la taille de l'image qui peut être utilisée comme favicon du site. Tout est simple ici, la taille du favicon est assez "standard" et est de 16x16 pixels, si vous avez besoin d'assurer une compatibilité maximale entre navigateurs. Dans le même temps, pour divers appareils mobiles et leurs navigateurs spécifiques, vous pouvez utiliser des icônes de 32x32, 96x96 et même 192x192 pixels.

Parlons maintenant de la façon d'installer un favicon sur un site Joomla. Mais puisque nous n'avons pas encore d'icône, créons-en une. Le moyen le plus pratique de le créer consiste à utiliser des générateurs en ligne, car vous évitez ainsi d'installer des logiciels supplémentaires et, en règle générale, ces services, ainsi que les icônes créées, proposent de copier le code nécessaire pour afficher l'icône.

L'un des services les plus populaires pour créer des icônes favicon à l'heure actuelle est le générateur favicon.ru, que nous utilisons dans cet article. Il existe également un très bon générateur de favicon (favicon-generator.org), qui au lieu d'une seule icône, crée une archive complète dans laquelle des icônes de différentes tailles sont générées. Ainsi, pour chaque taille, le code de connexion est également indiqué.

Pour créer un favicon, sélectionnez l'image suivante.

Tendances et approches modernes du développement Web

Apprenez l'algorithme pour une croissance rapide à partir de zéro dans la création de sites Web

Il suffit maintenant de télécharger l'image sélectionnée à l'aide d'un formulaire spécial et, dans l'ensemble, la génération sera terminée.

Après avoir téléchargé l'image, sélectionnez la zone d'intérêt à partir de laquelle l'icône sera générée et cliquez sur "Suivant".

Après génération, vous pouvez voir un exemple d'affichage d'un nouveau favicon dans le navigateur, et si la vue vous convient, cliquez sur le bouton "Télécharger le favicon" pour télécharger le fichier. Ainsi, l'icône est prête.

Favicon dans Joomla - situé à la racine du répertoire de modèles actifs. Par exemple, pour le template Beez3, ce dossier est templates\beez3. Cela signifie qu'il suffit de placer le fichier téléchargé dans le dossier spécifié, remplaçant ainsi l'icône standard, et de mettre à jour les informations dans le navigateur. Le code qui affiche le favicon dans le navigateur est généré directement par le moteur Joomla, vous n'avez donc pas besoin de l'écrire manuellement. Pour ceux que ça intéresse, je précise que ce code est généré à \libraries\joomla\document\html, dans le fichier html.php. Pour afficher l'icône, le noyau de Joomla fournit une méthode spéciale appelée addFavicon(), qui est appelée dans le fichier ci-dessus.

Maintenant, vous savez comment changer le favicon dans joomla 3, la seule chose que je voudrais, pour ainsi dire, pour le développement général, est de fournir le code pour afficher l'icône - pour le cas où vous auriez besoin de l'écrire manuellement.

Une identification supplémentaire de votre site Joomla peut être une icône ou un favicon unique. Favicon sur le site Joomla sera reflété dans les navigateurs dans le titre des onglets et des signets créés avec toutes les pages de votre site. Par défaut, tous les sites gérés par le CMS Joomla ont les mêmes icônes standards. Seule l'icône de la partie visible du site Joomla et celle du panneau d'administration diffèrent. L'icône de la partie du site que les visiteurs voient peut être facilement modifiée.

Dois-je changer l'icône (favicon) du site Joomla

Le remplacement de l'icône de votre site n'affecte que la composante subjective de l'optimisation du site. Un visiteur, ayant mis en signet une page du site, peut alors facilement la retrouver dans la liste de tous ses favoris. De plus, l'icône du site se reflète dans les outils de recherche et d'application. par exemple, dans la liste des sites de Yandex Webmaster.

De plus, en remplaçant l'icône Joomla standard, vous cesserez de faire de la publicité indiquant que votre site est géré par Joomla, et c'est l'une des étapes pour augmenter la sécurité du site.

Exigences pour la nouvelle icône Joomla

Le mot Favicon est l'abréviation de deux mots anglais, favoris et icône . Les icônes Joomla ont leur propre standard. Leur taille doit être de 16x16 ou 32x32 pixels. Fait favicon , devrait être en 256 couleurs. Et le plus important, le format d'icône Joomla doit être favicon .ico .

Étapes pour remplacer le favicon d'un site Joomla

Le remplacement de l'icône du site Joomla se fait en quelques étapes simples :

• Générez une icône unique à partir de n'importe quelle photo PNG ou JPEG. Ou dessinez vous-même une icône en utilisant des services en ligne ou des programmes photo;
• Créez un favicon à partir de l'image au format ico, taille 16(32)×16(32) px;
• Téléchargez une nouvelle icône dans le répertoire du site, tout en supprimant tous les anciens favicons ;
• Insérez un code spécial dans le modèle de la page principale de votre site.

Analysons chaque étape en détail.

Étape 1. Créer une icône pour le site Joomla

Il existe de nombreux outils en ligne sur Internet pour générer une icône favicon .ico à partir de n'importe quelle photo. Ici, vous devez faire attention à ce qui suit.

Si vous voulez que votre favicon soit sans fond blanc, alors sa source doit être avec un fond transparent lors de sa création et au format PNG lors de la sauvegarde. En utilisant des formats de photo autres que png, vous obtiendrez un Favicon avec un fond blanc ou noir. Vous trouverez d'excellents stockages d'icônes sur Internet dans le menu supérieur de ce site dans la rubrique : Webmaster Tools.

Vous pouvez également trouver vous-même des générateurs de favicon en tapant dans la boîte de recherche : générateur de favicon Ici, je vais donner les adresses des générateurs d'icônes.

1. pr-cy.ru/favicon
2. tools.dynamicdrive.com/favicon

• iconfinder.com
• freepik.com/free-icons
• genericons.com
• flaticons.net
• iconbird.com
• iconizer.net
• webhostinghub.com
• icônespedia.com
• iconsearch.ru
• icônes8.com
• glyphicons.com
• findicons.com
• icomoon.io
• iconarchive.com
• themify.me
• thenounproject.com
• flaticon.com

Les icônes Favicon sont faites comme suit

• Trouvez à l'avance l'image originale de votre future icône ;
• Ouvrez le générateur.
• Dans la fenêtre du chargeur du générateur, sélectionnez votre icône sur l'ordinateur. Choisissez la taille de la future icône, pour Joomla 16×16 pixels ;
• Appuyez sur un bouton comme "Make".
• Favicon est généré en quelques secondes. La prochaine étape consiste à le télécharger sur votre ordinateur. Pour ce faire, il y a un bouton "Télécharger".Icône sur l'ordinateur, vous devez le télécharger dans le répertoire.

Étape 2. Téléchargez une nouvelle icône dans le répertoire du site Web

Avec l'endroit dans le répertoire du site où vous devez télécharger une nouvelle icône (favicon) du site, la situation est la suivante.

Auparavant, l'endroit obligatoire pour placer favicon .ico était le répertoire racine du site. Maintenant, la situation s'est un peu adoucie. L'utilisation de modèles dynamiques vous permet de télécharger une icône dans n'importe quel répertoire de votre site, uniquement dans le code (ci-dessous), vous devez spécifier clairement le chemin d'accès à ce répertoire. Mais en même temps, vous devez vous rappeler que plus l'icône est éloignée de la racine du site, plus il faudra de temps pour se charger dans le navigateur. Et pour la vitesse de chargement du site, vous devez vous battre, même dans de petites choses.

class="eliadunit">

Par conséquent, je vous conseille de télécharger le favicon principal à la racine du site Joomla. Pour télécharger, vous avez besoin d'un client FTP ou d'une autorisation dans le panneau d'administration de l'hébergement. Avant de télécharger une nouvelle icône (favicon ), vérifiez tous les dossiers du site et supprimez ou renommez les anciennes favicons qui peuvent avoir été installées dans les modèles que vous avez téléchargés. Vérifiez séparément le dossier contenant votre modèle . Supprimez le fichier favicon.ico des sous-dossiers du modèle. Après avoir supprimé les anciens favicons, téléchargez le nouveau à la racine du site. Favicon dans l'annuaire du site, il reste à insérer le code dans le template de la page principale du site.

Note:À ce stade, l'icône du site a peut-être déjà changé. Dans certains modèles, le code d'affichage de l'icône (à propos du code ci-dessous) est déjà écrit dans le modèle de site, et donc, lors du remplacement de l'icône dans le catalogue, il peut également changer dans l'onglet du navigateur. Juste pour voir cela, vous devez vider le cache du site et peut-être redémarrer le navigateur.

Étape 3. Collez le code dans le modèle de site pour afficher l'icône favicon

Note: Cette méthode est obsolète, dans les principaux navigateurs, la nouvelle icône s'affiche sans coller ce code. Il suffit de supprimer tous les anciens favicons de la racine du site et du modèle. et également vider le cache du navigateur et du site.

Le code (ci-dessous) est inséré dans le modèle de page d'accueil Joomla entre les balises (exemple ci-dessous). Sur Internet, vous pouvez trouver plusieurs options de codes (favicon) pour les sites Joomla. Je vais donner un exemple des seuls codes qui fonctionnent sur tous mes sites Joomla.

Coder un. L'icône apparaît presque instantanément, après avoir vidé le cache du site.

Code deux. En raison de l'absence d'affichage dans le navigateur du type d'élément de formulaire (type), cette icône apparaît dans le navigateur en 1 à 2 jours.

Code trois. Pour une icône (favicon) située hors du répertoire racine (patch-to est le chemin vers le dossier favicon).

• Les codes fonctionnent avec cette orthographe SHORTCUT ICON , et avec cette icône de raccourci
• Si le code de votre site est HTML, pas XHTML, alors vous devez terminer le code par ">" et non "/>"

Si vous devez afficher l'icône dans le navigateur IE, essayez d'ajouter ce code :

Après avoir inséré le code dans le modèle, n'oubliez pas de sauvegarder, videz également le cache du site.

• Panneau d'administration >>>Site>>>Maintenance>>>Effacer tout le cache (pour les versions Joomla 1.7-2.5-3.x)
• Panneau d'administration>>>Outils >>>Effacer tout le cache (pour la version 1.5)

Un exemple de code collé pour afficher l'icône du site :

Une façon d'augmenter l'attractivité du site consiste à ajouter des icônes aux éléments de menu. Les icônes sont de petites images associées au contenu d'un élément de menu. Leur intérêt est d'attirer l'attention des utilisateurs et de les fidéliser au site. Dans cet article, je parlerai de deux façons d'ajouter des icônes aux éléments de menu : rapide, facile, mais mauvais, et complexe, long, mais bon.

Joomla. Étape 1. Choisir la taille des icônes.

Une icône est une petite image. Tout d'abord, voyons quelles sont les exigences pour les icônes. Je distinguerais :

1. L'icône doit correspondre à la taille du texte.
2. L'icône doit avoir un fond transparent ou un fond similaire à celui sur lequel se trouve le menu.
3. L'icône doit avoir une petite taille de fichier (ne pas être "lourde").

La taille d'icône la plus courante sur Internet est de 16 x 16 pixels, car c'est la taille que devraient avoir les favicons du site (une petite image située devant la barre d'adresse du navigateur).

Voici un exemple d'une telle icône :

Pour le site du site, je choisirai cette taille.

Ajout d'icônes aux éléments de menuJoomla. Étape 2. Recherchez les icônes appropriées.

S'il existe plusieurs façons de rechercher et de sélectionner des icônes. Le premier est la recherche d'images Google.

Curieusement, cette recherche fonctionne encore très maladroitement. Parfois ça ne marche pas du tout. Nous sommes au 21e siècle et Yandex et Google n'ont pas appris à rechercher des images par taille exacte.

Pour afficher uniquement les icônes de la taille requise dans la recherche, définissez les paramètres :

Ne vous précipitez pas, Google-haters, pour gronder ce PS. Yandex ne recherche pas du tout la taille exacte :-).

La deuxième méthode consiste à rechercher des sites avec des jeux d'icônes ou à rechercher directement des jeux. Les icônes sont divisées en gratuites et commerciales. Le choix d'icônes gratuites est assez riche.

Si vous avez besoin de ramasser beaucoup d'icônes, il est facile de s'embrouiller. Assurez-vous de conserver une liste des mappages entre les éléments de menu et les icônes.

Ajout d'icônes aux éléments de menuJoomla. Étape 3. Icônes de liaison. La manière facile.

Une fois les icônes sélectionnées, vous pouvez commencer à les lier aux éléments de menu du site. Je parlerai de deux manières. Le premier sera lié via le paramètre de l'élément de menu, l'option "Lier l'image":

Ici, nous sélectionnons simplement une image pour l'élément de menu et c'est tout. C'est très simple, rapide et pratique. Mais c'est loin d'être la meilleure option, et voici pourquoi. Chaque icône est une image qui s'affiche sur le site. Le navigateur de l'utilisateur, lorsqu'il entre sur le site, charge séquentiellement toutes les images. Envoie une demande, reçoit une réponse, télécharge une image. Et ainsi de suite jusqu'à ce que toutes les images soient chargées. Une telle opération prend à chaque fois une fraction de seconde, mais lorsqu'il y a beaucoup d'images, tout cela se traduit par des secondes supplémentaires de chargement de la page. Un exemple frappant de la façon de ne pas le faire est le site joomla-master.org. Le développeur a apparemment ajouté des images pour les éléments de menu de cette manière. Voyons ce qu'il s'est passé :

L'ouverture de la page principale du site viole simplement le navigateur et l'ordinateur de l'utilisateur.

Ajout d'icônes aux éléments de menuJoomla. Étape 3. Icônes de liaison. Bonne façon.

Un bon moyen est d'utiliser des sprites CSS. Leur essence est que toutes les icônes sont placées sur une image et qu'elles sont accessibles à l'aide de CSS. Grâce à cette approche, le navigateur de l'utilisateur ne charge qu'une seule image et, par conséquent, le temps de chargement de la page est réduit. La mauvaise nouvelle est que l'ajout d'icônes aux éléments de menu avec un sprite CSS est une tâche beaucoup plus difficile que la méthode décrite ci-dessus. La bonne nouvelle est qu'il existe désormais des services qui facilitent grandement la création de sprites.

Voyons comment créer un sprite.

Tout est prêt. Il arrive que vous ayez besoin de modifier un peu plus l'affichage des images de sprite. C'est facile à gérer avec Firebug. Ce qui s'est passé, vous pouvez le voir sur ce site à gauche.

Le principal inconvénient des sprites est la difficulté de les mettre à jour. Ainsi, par exemple, si vous avez même un nouvel élément de menu qui doit ajouter une icône, le sprite devra être recréé.

Bien que j'ai appelé les façons de créer des icônes pour les éléments de menu Joomla simples et bonnes, il est impossible de dire sans équivoque laquelle est la meilleure. Chaque méthode a ses propres avantages et inconvénients. S'il y a peu d'icônes ou si elles changent fréquemment, il est préférable d'utiliser la première méthode. S'il y a beaucoup d'icônes et qu'elles restent constantes, comme les éléments de menu auxquels elles sont attachées, alors vous devez certainement utiliser des sprites.

En contact avec