{"id":1569,"date":"2022-08-19T19:33:06","date_gmt":"2022-08-19T17:33:06","guid":{"rendered":"https:\/\/jagullo.fr\/blog\/?p=1569"},"modified":"2022-09-23T08:06:26","modified_gmt":"2022-09-23T06:06:26","slug":"les-librairies-icones-pour-le-web","status":"publish","type":"post","link":"https:\/\/jagullo.fr\/blog\/les-librairies-icones-pour-le-web\/","title":{"rendered":"Les librairies d&rsquo;ic\u00f4nes pour le web"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Utiliser une librairie d&rsquo;ic\u00f4nes pour son site Internet<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Les librairies d&rsquo;ic\u00f4nes sont relativement r\u00e9centes dans le domaine du web. Il en existe quelques-unes dont certaines sont gratuites et d&rsquo;autres payantes. L&rsquo;utilisation de ces librairies permet d&rsquo;ajouter des ic\u00f4nes sur son site Internet <strong>pour illustrer des boutons <\/strong>ou<strong> des zones de r\u00e9assurance<\/strong>. Elles peuvent \u00eatre utilis\u00e9es directement dans le code source de son site avec les classes CSS ou \u00e0 partir de blocs Gutenberg ou d&rsquo;un autre constructeur de pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ces librairies peuvent <strong>\u00eatre t\u00e9l\u00e9charg\u00e9es en SVG<\/strong> pour \u00eatre utilis\u00e9es dans des templates de page ou pour du print. Apr\u00e8s la conception des templates des pages, le d\u00e9veloppeur web devra incorporer la librairie s\u00e9lectionn\u00e9e pour utiliser les ic\u00f4nes directement en CSS. Chaque librairie propose sur leur site web un moteur de recherche pour faciliter la recherche d&rsquo;ic\u00f4nes. Malheureusement l&rsquo;incorporation d&rsquo;une biblioth\u00e8que d&rsquo;ic\u00f4nes n\u00e9cessite de charger enti\u00e8rement la librairie et les polices de caract\u00e8res. Il n&rsquo;est donc pas possible de charger seulement les ic\u00f4nes utilis\u00e9es sur son site web \u00e0 part si on passe par le format SVG ou qu&rsquo;on exporte les ic\u00f4nes dans un sprite CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour les d\u00e9veloppeurs web, il est possible d&rsquo;utiliser ces librairies avec les pr\u00e9processeurs <strong>LESS et SCSS ou les frameworks JavaScript<\/strong> comme Vue.js et Angular. Si la librairie ne fournit pas un module JavaScript, il existe surement un projet open source qui permet de l&rsquo;int\u00e9grer dans son projet. Il est aussi possible d&rsquo;utiliser ces librairies dans une application desktop ou mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/08\/illustration_librairie-icone.jpg\" alt=\"\" class=\"wp-image-1642\" width=\"720\" height=\"480\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/08\/illustration_librairie-icone.jpg 960w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/08\/illustration_librairie-icone-300x200.jpg 300w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/08\/illustration_librairie-icone-768x512.jpg 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption>La librairie Font Awesome en version gratuite<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Font Awesome<\/h2>\n\n\n\n<p class=\"title-link wp-block-paragraph\"><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/fontawesome.com\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La librairie Font Awesome est l&rsquo;une des plus connues et des plus populaires. Cr\u00e9\u00e9e par <strong>Dave Gandy<\/strong>, la premi\u00e8re version fut sortie en 2012 et \u00e9tait pens\u00e9e pour \u00eatre utilis\u00e9e avec le framework Bootstrap. Elle contient <strong>plus de 3600 ic\u00f4nes dont 465 sont gratuites<\/strong> pour une utilisation personnelle et commerciale. Cette librairie propose plusieurs styles d&rsquo;ic\u00f4nes comme le format Regular, Solid, Light, Thin ou m\u00eame une version Duotone pour ajouter un effet d&rsquo;opacit\u00e9 sur certains \u00e9l\u00e9ments des pictos. Les ic\u00f4nes sont bien travaill\u00e9es avec un style tr\u00e8s sympa visuellement et sont cat\u00e9goris\u00e9es pour rechercher facilement l&rsquo;ic\u00f4ne id\u00e9ale dans un domaine particulier.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La version payante est disponible <strong>sous abonnement annuel<\/strong>, mais si on le r\u00e9silie on dispose d&rsquo;une licence perp\u00e9tuelle de la derni\u00e8re version en cours lors de son abonnement. Un CDN est aussi disponible avec l&rsquo;abonnement ainsi qu&rsquo;un syst\u00e8me de kit pour incorporer la librairie plus facilement dans une page web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Line Icons<\/h2>\n\n\n\n<p class=\"title-link wp-block-paragraph\"><a href=\"https:\/\/lineicons.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/lineicons.com\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La librairie Line Icons est un concurrent direct de Font Awesome. Disponible gratuitement sous licence CreativeCommons pour une utilisation personnelle et commerciale, la version gratuite propose <strong>plus de 500 ic\u00f4nes <\/strong>tandis que <strong>la version pro plus de 5000<\/strong>. Disponible sous forme d&rsquo;abonnement mensuel ou annuel, la version pro dispose d&rsquo;un CDN, d&rsquo;une variation Light et des sources au format AI. Une attribution est requise pour la version gratuite, mais sans restriction sur le nombre de pages vues \u00e0 la diff\u00e9rence de Font Awesome. Les ic\u00f4nes sont bien cat\u00e9goris\u00e9es facilitant la recherche dans un domaine et ont un style l\u00e9ger, sobre et \u00e9l\u00e9gant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Material Design Symbols &amp; Icons<\/h2>\n\n\n\n<p class=\"title-link wp-block-paragraph\"><a href=\"https:\/\/fonts.google.com\/icons\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/fonts.google.com\/icons<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les librairies <strong>Material Design Icons<\/strong> et <strong>Material Design Symbols<\/strong> sont toutes 2 d\u00e9velopp\u00e9es par Google pour compl\u00e9ter sa charte Material Design. Sorties respectivement en 2014 puis en 2022, ces 2 librairies sont disponibles sous licence Apache pour \u00eatre incorpor\u00e9es dans des projets web et mobile. On peut les utiliser en CSS via le syst\u00e8me de police ou en SVG.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La derni\u00e8re version Material Design Symbols contient plus de 2500 pictos et son grand avantage est <strong>l&rsquo;utilisation des polices dynamiques<\/strong>. Ainsi il est possible de r\u00e9gler dynamiquement la largeur des traits des ic\u00f4nes pour une int\u00e9gration plus faciles. Cependant les ic\u00f4nes ne sont pas cat\u00e9goris\u00e9es, mais elles sont disponibles en 3 styles Outlined, Rounded et Sharp et peuvent \u00eatre remplies tout comme le style Solid de Font Awesome.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bootstrap Icons<\/h2>\n\n\n\n<p class=\"title-link wp-block-paragraph\"><a href=\"https:\/\/icons.getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/icons.getbootstrap.com\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La librairie Bootstrap Icons est relativement r\u00e9cente sur le web, publi\u00e9e en 2020 elle est sortie officiellement avec la version 4.5 du framework Bootstrap. Elle contient <strong>plus de 1600 ic\u00f4nes<\/strong> disponibles sous licence MIT mais ne poss\u00e8de pas diff\u00e9rents styles comme Font Awesome. Le design des pictos est tr\u00e8s light, dans un style plut\u00f4t sobre avec peu de traits. Les ic\u00f4nes ne sont pas cat\u00e9goris\u00e9es ce qui rend plus difficiles les recherches.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les autres librairies<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il existe d&rsquo;autres librairies d&rsquo;ic\u00f4nes pour le web comme <strong>Feather<\/strong> ou <strong>Octicons<\/strong> et m\u00eame des moteurs de recherches comme les sites <strong>Flaticon<\/strong> ou <strong>Noun Project<\/strong> qui regroupent des sets d&rsquo;ic\u00f4nes gratuits ou payants fait par des designers. Toutes ces librairies permettent de rendre les interfaces des applications ou des sites plus intuitives pour les utilisateurs et am\u00e9liorent grandement la charte graphique. Il existe aussi des librairies d&rsquo;ic\u00f4nes anim\u00e9es comme celles propos\u00e9es par <strong>Lordicon<\/strong> mais pouvant alourdir l&rsquo;interface. Le Material Design traite dans sa charte l&rsquo;aspect des ic\u00f4nes anim\u00e9es ainsi que des transitions entre 2 ic\u00f4nes pour transformer un bouton menu en bouton fermeture. Les ic\u00f4nes ont donc beaucoup d&rsquo;avenir pour les interfaces web ou mobile et sont un \u00e9l\u00e9ment indispensable d&rsquo;une charte graphique moderne.<\/p>\n<div class=\"list-tags\"><a href=\"https:\/\/jagullo.fr\/blog\/tag\/bootstrap\/\" class=\"link-tag\" title=\"Bootstrap\">Bootstrap<\/a><a href=\"https:\/\/jagullo.fr\/blog\/tag\/css-sass-less\/\" class=\"link-tag\" title=\"CSS \/ SASS \/ LESS\">CSS \/ SASS \/ LESS<\/a><a href=\"https:\/\/jagullo.fr\/blog\/tag\/html\/\" class=\"link-tag\" title=\"HTML\">HTML<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Utiliser une librairie d&rsquo;ic\u00f4nes pour son site Internet Les librairies d&rsquo;ic\u00f4nes sont relativement r\u00e9centes dans le domaine du web. Il en existe quelques-unes dont certaines sont gratuites et d&rsquo;autres payantes. L&rsquo;utilisation de ces librairies permet d&rsquo;ajouter des ic\u00f4nes sur son site Internet pour illustrer des boutons ou des zones de r\u00e9assurance. Elles peuvent \u00eatre utilis\u00e9es [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1642,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[23,28,30],"class_list":["post-1569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphisme","tag-bootstrap","tag-css-sass-less","tag-html","et-has-post-format-content","et_post_format-et-post-format-standard"],"_links":{"self":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/comments?post=1569"}],"version-history":[{"count":3,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1569\/revisions"}],"predecessor-version":[{"id":1652,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/1569\/revisions\/1652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media\/1642"}],"wp:attachment":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media?parent=1569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/categories?post=1569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/tags?post=1569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}