Des icônes pour votre design Jeedom

Des icônes pour votre design Jeedom

Vous aussi vous profiter de ce confinement pour refaire, revoir ou améliorer votre design pour votre tablette murale ? Si c’est aussi votre cas, trouver des icônes pour un design Jeedom gratuits et sympas risque d’être un challenge.

Dans un précédent article article, je vous parlais d’un menu au style industriel mais sans vous avoir présenter comment l’enrichir de nouveaux icônes. Ici, je vais vous partager une galerie d’icônes semi-gratuite. En gros, des icônes basiques sont gratuits, d’autres payants, mais très honnêtement, on peut déjà faire beaucoup de chose avec le set gratuit.

Font Awesome, une galerie d’icône pour un design Jeedom

Cette galerie s’appelle Font Awesome et elle vous propose un moteur de recherche avec presque 8000 icônes gratuits et payants : https://fontawesome.com/icons?d=gallery

font awesome homepage
Moteur de recherche Font Awesome

Il vous suffira d’utiliser la barre de recherche pour trouver l’icône adapté à ce que vous souhaitez faire. Voici quelques exemples de recherches utiles pour votre design Jeedom : « home », « light », « security », « lock », « user », « camera », « energy », « battery », « alert », …

Comment utiliser ces icônes ?

Une fois votre icône trouvé, il vous faudra cliquer dessus pour ouvrir sa page de présentation comme ci-dessous. Vous trouverez ensuite dans le carré rouge la référence de l’icône que vous pourrez utiliser dans votre code html.

page icône lock
Page de présentation de l’icône

Maintenant vous pouvez retourner dans votre design Jeedom. Dans votre bloc Text / Html de votre menu par exemple, il vous faudra d’abord ajouter un lien vers le fichier css Font Awesome qui vous permettra d’appeler les icônes par leur référence.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Et il vous sera à présent possible d’utiliser votre icône de la plus simple des manières :

<a href="#">
  <i class="fas fa-lock" aria-hidden="true"></i>
</a>

La première partie « fas » précise quel style vous souhaitez comme indiquez ci-dessous, puis la deuxième partie est la référence de votre icône préfixé par fa-.

style icone
Différents styles pour un même icône

Si vous souhaitez plus de détails, la documentation Font Awesome est super bien faite.

Télécharger les icônes pour un usage local

Suite à plusieurs commentaires, je rajoute ce paragraphe qui vous sera peut être utile si vous souhaitez avoir localement vos icônes. Vous trouverez ci-dessous le bouton pour télécharger le fichier svg qui vous permettra d’utiliser, après upload avec jeexplorer, ces icônes dans Jeedom.

Télécharger l'icône

J’espère que ces icônes pour votre design Jeedom vous seront utiles , en voici un autre exemple dans un menu que je vous ai documenté dans cet article.

menu jeedom
Mon menu actuel sur Jeedom

A bientôt

/F

4 thoughts on “Des icônes pour votre design Jeedom

  1. merci pour ce bon tuto mais j’avait une question :

    si j’ai bien compris le fonctionnement, les icones sont stockés a distance sur le site « https://fontawesome.com » , mais si le site ferme comment cela ce passe ?

    y as t’il moyens de les avoir localement ?

    merci d’avance

    1. Bonjour,
      C’est en effet un risque. Il y a la possibilité de télécharger les icônes unitaire que tu utilises en local.
      Personnellement, je prends le risque car ca me permet d’être plus flexible.
      Je viens de rajouter un paragraphe sur comment les télécharger, merci pour le feedback.

  2. Bonjour
    Merci pour cette aide, je voudrai également utiliser des .png qui sont dans jeexplorer ?
    j’ai utiliser : mais l’image se trouve « voyante » par rapport aux autres , comment je peux le rendre plus gris clair comme les autres ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *