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
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.
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-.
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.
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.
A bientôt
/F
11 réflexions sur « Des icônes pour votre design Jeedom »
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
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.
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 ?
Bonjour,
Je ne suis pas sur de comprendre, peux-tu m’en dire plus ?
Bonjour,
Le menu du design réalisé est vraiment top, chapeau!
Débutant dans Jeedom et la programmation, je ne trouve pas comment configurer le html pour pouvoir utiliser les icones de fontawasome en mode local
Est-il possible d’avoir un bout de code avec un exemple d’icone en svg et ainsi pouvoir avoir le même comportement que les icones en ligne?
Merci d’avance
Et encore bravo pour ce design sobre!
Bonjour Vincent,
Désolé pour le retard de la réponse. Font awesome a un article qui explique plutôt bien comment les avoir en local : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
N’hésite pas à me dire si tu as besoin de précision.
Bonjour
Je suis dans le même cas .
J’ai télécharger les icone je les ai copier dans /mytheme/ mais comment les ajouté au design ? merci
Bonjour exor,
Tu trouveras un super article directement sur le site de font-awesome qui t’aidera : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Du coup dans jeedom, dans la balise link qu’il faudra /mytheme/css/all.css si tu as mis le dossier css à la racine de mytheme.
En espérant avoir aider
Bonjour,
Merci pour ton blog et ces tutos!
Quand tu dis
« 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 »
Comment tu fais exactement pour importer ces fichiers svg dans jeedom ?
Au niveau du code html surtout. Quel est la bonne formule pour intégrer les svg aux codes html?
Parce que la je bloque.
Merci.
Merci pour cet excellent tuto qui m’a permis de rendre ma navigation entre mes designs super jolie et bien pratique.
J’ai pu faire les modifications dont j’avais besoin (ajouter des boutons, des liens etc…).
Par contre j’ai une phénomène bizarre que je n’arrive pas à m’expliquer: sur le PC avec Chrome tout s’affiche nickel! Par contre, sur mon iphone, quand j’utilise chrome, la page se charge et une fois chargée d’un coup j’ai comme une restricition d’affichage ou un frame qui se crée et mon design s’agrandi mais n’utilise plus que 50% de la hauteur de l’écran… je n’y comprends rien!
Est ce que quelqu’un aurait une idée d’ou ça pourrait venir?
Merci
Je viens de m’apercevoir que j’ai laissé le commentaire sur le mauvais article, mon commentaire était pour l’article http://ma-maison-intelligente.fr/2020/03/ameliorer-son-design-jeedom-avec-un-menu/