La dernière mise à jour de Beaver Builder contient une fonctionnalité puissante dont je suis très heureux de vous faire la démonstration aujourd'hui. En plus de Font Awesome, des icônes de la Fondation Zurb et des Dashicons de WordPress, vous pouvez désormais créer vos propres polices d'icônes avec Icomoon ou Fontello et les télécharger pour les utiliser directement dans l'interface Beaver Builder. Aucun codage requis !

Création d'une police personnalisée

Dans cette démo, je vais utiliser l'application Icomoon, mais les étapes devraient être similaires si vous choisissez d'utiliser Fontello. Pour commencer, visitez le site Icomoon et cliquez sur le gros bouton Icomoon App dans le coin supérieur droit.

Au lancement de l'application Icomoon, vous serez accueilli avec une sélection de leurs icônes gratuites parmi lesquelles vous pourrez sélectionner pour créer votre police. Si vous avez besoin d'autre chose que ce qui y est proposé, vous pouvez soit télécharger vos propres icônes, soit en ajouter d'autres à partir de leurs bibliothèques gratuites et premium.

Une fois que vous avez terminé de créer votre sélection, vous pouvez générer une nouvelle police d'icône à télécharger en cliquant sur l'onglet Générer une police dans le coin inférieur droit.

Sur l'écran Générer une police, vous serez accueilli avec votre sélection d'icônes ainsi qu'un certain nombre de façons de modifier les paramètres de votre police avant de la télécharger. Les paramètres par défaut sont généralement corrects, mais il y en a un en particulier que vous devez modifier si vous envisagez de télécharger plusieurs polices d'icônes. Ce paramètre est accessible en cliquant sur le bouton Préférences dans l'en-tête et est intitulé Class Prefix .

Le paramètre Préfixe de classe permet d'identifier vos icônes sur la page lorsqu'elles sont ajoutées à une mise en page Beaver Builder. Si elles restent inchangées, plusieurs polices d'icônes utilisant le préfixe icon- entreront en conflit, provoquant un affichage incorrect de certaines dans le sélecteur d'icônes de Beaver Builder. Vous pouvez modifier ce paramètre comme vous le souhaitez, comme my-icon1- ou my-icon2-, mais le plus important est qu'il soit modifié.

Vous souhaiterez peut-être également modifier le paramètre Nom de la police pour identifier facilement la police de votre icône personnalisée dans le sélecteur d'icônes de Beaver Builder (il est indispensable de choisir un nom personnalisé pour Fontello). Une fois que vous avez terminé de peaufiner les paramètres, cliquez sur le bouton Télécharger dans le coin inférieur droit et préparez-vous à télécharger votre nouvelle police d'icône sur Beaver Builder !

Téléchargement de votre police d'icône sur Beaver Builder

Pour télécharger votre police d'icône personnalisée sur Beaver Builder, connectez-vous à votre site WordPress et accédez à Paramètres > Page Builder > Icônes. À partir de là, cliquez sur le bouton Télécharger le jeu d'icônes et téléchargez le fichier zip que vous avez téléchargé depuis Icomoon à l'aide du téléchargeur multimédia WordPress natif. Après cela, sélectionnez le fichier zip téléchargé et cliquez sur le bouton Sélectionner un fichier pour ajouter votre police d'icône personnalisée à Beaver Builder. La page sera actualisée et votre police d'icône personnalisée sera désormais visible dans la liste des polices d'icônes Beaver Builder disponibles, similaire à l'image ci-dessous.

Gestion des polices d'icônes disponibles

En plus de télécharger vos propres polices d'icônes personnalisées, nous vous avons également donné la possibilité de gérer les ensembles activés ou désactivés dans Beaver Builder ou de supprimer complètement une police d'icônes personnalisée que vous avez téléchargée. Il s'agit d'une fonctionnalité intéressante pour ceux qui souhaitent limiter la sélection de polices d'icônes disponibles à leurs propres ensembles personnalisés ou garder la sélection simple pour les clients qui modifieront des pages à l'aide de Beaver Builder.

La désactivation des polices d’icônes est relativement simple. Décochez simplement les polices d'icônes que vous souhaitez désactiver (ou cochez celles que vous souhaitez activer) et cliquez sur le bouton Enregistrer les paramètres d'icône . Pour supprimer une police d'icône personnalisée que vous avez téléchargée, cliquez simplement sur le lien Supprimer à côté du nom de la police d'icône que vous souhaitez supprimer.

Un grand pouvoir implique une grande responsabilité

Les polices d'icônes sont géniales et peuvent vraiment aider à pimenter le contenu de votre site Web, mais vous devez être prudent. Ce n’est pas parce que vous avez accès à plusieurs jeux de polices d’icônes que vous devez tous les utiliser sur la même page. Pourquoi pas? Vitesse de chargement des pages !

Disons que vous avez ajouté des icônes de Font Awesome et Foundation sur la même page. Afin d'afficher ces icônes, Beaver Builder devra charger la feuille de style et les fichiers de polices pour Font Awesome et Foundation, ajoutant ainsi du temps de chargement à votre page. Au lieu d'utiliser plusieurs polices d'icônes sur la même page, faites de votre mieux pour en conserver une seule ou, mieux encore, pour de meilleurs résultats, créez votre propre police d'icônes avec uniquement les icônes dont vous avez besoin et utilisez-la à la place !

Amusez-vous!

Nous espérons que vous apprécierez cette nouvelle fonctionnalité et que vous la trouverez comme un ajout utile à votre boîte à outils Beaver Builder. Comme toujours, si vous avez des questions ou des commentaires, n'hésitez pas à nous le faire savoir dans les commentaires ci-dessous. Apprécier!

Crédit image : Thomas S.