{"id":6850,"date":"2022-06-21T19:17:07","date_gmt":"2022-06-21T17:17:07","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/changer-la-couleur-des-icones-svg-dans-elementor\/"},"modified":"2026-09-02T22:48:39","modified_gmt":"2026-09-02T20:48:39","slug":"changer-la-couleur-des-icones-svg-dans-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/changer-la-couleur-des-icones-svg-dans-elementor\/","title":{"rendered":"Changer la couleur des ic\u00f4nes SVG dans Elementor"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Vid\u00e9o pas \u00e0 pas<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cambiar el color de iconos SVG en Elementor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/HKWfEN4EBEM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"0-%C2%BFqu%C3%A9-es-un-archivo-svg\">Qu\u2019est-ce qu\u2019un fichier SVG ?<\/h2>\n\n<p class=\"wp-block-paragraph\"><em>Scalable Vector Graphics<\/em> (SVG) est un format de fichier vectoriel adapt\u00e9 au web. Contrairement aux <em>fichiers raster<\/em> bas\u00e9s sur des pixels comme les JPEG, les fichiers vectoriels stockent les images via des formules math\u00e9matiques bas\u00e9es sur des points et des lignes sur une grille. Cela signifie que les fichiers vectoriels comme les SVG peuvent \u00eatre redimensionn\u00e9s de mani\u00e8re significative sans perdre de leur qualit\u00e9, ce qui les rend id\u00e9aux pour les logos et les graphiques complexes en ligne.   <\/p>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee2.svg\"><img decoding=\"async\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee2.svg\" alt=\"Abeille - SVG\" class=\"wp-image-4827\" style=\"width:359px\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">SVG \u2013 Taille 3 Ko<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"932\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png\" alt=\"Abeille - PNG - 1024px\" class=\"wp-image-4824\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png 1024w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-500x455.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-768x699.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-600x546.png 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">PNG (1024px) \u2013 Taille 85 Ko<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee.png\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"137\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee.png\" alt=\"Abeille\" class=\"wp-image-4825\" style=\"width:359px\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">PNG (150px) \u2013 Taille 13 Ko<\/p>\n<\/div>\n<\/div>\n\n<p class=\"wp-block-paragraph\">La taille d\u2019un fichier SVG d\u00e9pend de la quantit\u00e9 de donn\u00e9es d\u2019image qu\u2019il contient, mais elle est g\u00e9n\u00e9ralement inf\u00e9rieure \u00e0 celle de la plupart des autres types de fichiers. Les graphiques complexes avec de nombreux chemins et points d\u2019ancrage occuperont plus d\u2019espace de stockage que les designs plus simples et \u00e9pur\u00e9s. <\/p>\n\n<p class=\"wp-block-paragraph\">Ce ne sont pas seulement leurs capacit\u00e9s de redimensionnement qui rendent les SVG tr\u00e8s populaires aupr\u00e8s des concepteurs web. Les SVG sont \u00e9crits en code XML, ce qui signifie qu\u2019ils stockent toute information textuelle sous forme de texte litt\u00e9ral plut\u00f4t que de formes. Cela permet aux moteurs de recherche comme Google de lire les graphiques SVG pour leurs mots-cl\u00e9s, ce qui peut potentiellement aider un site web \u00e0 monter dans les classements de recherche.  <\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Vous pouvez facilement d\u00e9tecter un fichier SVG par son extension <strong>.svg<\/strong>.<\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\" id=\"historia-del-archivo-svg-b1b4932e-04fc-4758-a606-17c26a1ae7b1\">Histoire du fichier SVG<\/h2>\n\n<p class=\"wp-block-paragraph\">L\u2019histoire du fichier SVG remonte \u00e0 la fin des ann\u00e9es 1990, lorsque le World Wide Web Consortium (W3C) a invit\u00e9 les d\u00e9veloppeurs \u00e0 soumettre des propositions pour un nouveau type de format graphique vectoriel. Six propositions concurrentes ont \u00e9t\u00e9 pr\u00e9sent\u00e9es et ont contribu\u00e9 \u00e0 l\u2019\u00e9laboration de ce qui est finalement devenu le format SVG du W3C.  <\/p>\n\n<p class=\"wp-block-paragraph\">Les SVG ont mis du temps \u00e0 gagner en popularit\u00e9. Ils ont b\u00e9n\u00e9fici\u00e9 de relativement peu de support jusqu\u2019en 2017, lorsque les gens ont commenc\u00e9 \u00e0 voir les avantages d\u2019utiliser les SVG dans les navigateurs web modernes. Les fichiers SVG sont d\u00e9sormais largement utilis\u00e9s pour les images de sites web en 2D, car la plupart des navigateurs et des applications de dessin pour fichiers vectoriels peuvent les g\u00e9rer facilement.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"para-que-se-utilizan-los-archivos-svg-9841dbbb-f9c2-4fe5-8387-27f93dbeeb34\">\u00c0 quoi servent les fichiers SVG ?<\/h2>\n\n<p class=\"wp-block-paragraph\">Les graphiques vectoriels \u00e9volutifs ont parcouru un long chemin ces derni\u00e8res ann\u00e9es, mais \u00e0 quoi servent les SVG en pratique ?<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"iconos-y-logotipos-del-sitio-web--408c1260-6438-41e7-8a0d-305d8145492d\">Ic\u00f4nes et logos de site web.<\/h3>\n\n<p class=\"wp-block-paragraph\">Les concepteurs utilisent souvent les SVG pour afficher les ic\u00f4nes de sites web comme les boutons, ainsi que les logos d\u2019entreprise. La capacit\u00e9 de ce type de fichier \u00e0 s\u2019agrandir ou \u00e0 se r\u00e9duire sans compromettre sa qualit\u00e9 signifie qu\u2019ils sont id\u00e9aux pour les graphiques qui doivent appara\u00eetre \u00e0 plusieurs endroits et dans une vari\u00e9t\u00e9 de tailles. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"infografias-e-ilustraciones--a5e7ac03-4cae-41df-b241-3cf8dcc37811\">Infographies et illustrations.<\/h3>\n\n<p class=\"wp-block-paragraph\">Gr\u00e2ce \u00e0 l\u2019utilisation de XML dans les fichiers SVG, les moteurs de recherche comme Google peuvent lire des tableaux et des graphiques riches en texte, ce qui peut aider \u00e0 l\u2019optimisation pour les moteurs de recherche. Parce que Google peut d\u00e9tecter des mots-cl\u00e9s dans les SVG, cela peut potentiellement propulser une page web \u00e0 un classement plus \u00e9lev\u00e9 dans les r\u00e9sultats de recherche. De plus, pour rendre les pages web beaucoup plus int\u00e9ressantes, les SVG prennent \u00e9galement en charge l\u2019animation.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"pros-y-contras-de-los-archivos-svg-1037a193-6a10-4d94-8255-3592a65a5a92\">Avantages et inconv\u00e9nients des fichiers SVG<\/h2>\n\n<p class=\"wp-block-paragraph\">Il est utile de se renseigner sur les avantages et les inconv\u00e9nients du SVG avant d\u2019enregistrer vos images dans ce format de fichier.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"ventajas-de-los-archivos-svg-fbcb331c-faed-4507-a6e3-4aff933fc839\">Avantages des fichiers SVG<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Contrairement aux fichiers raster, qui sont compos\u00e9s de pixels, les graphiques vectoriels comme les SVG conservent toujours leur r\u00e9solution, quelle que soit leur taille. Vous n\u2019avez pas \u00e0 vous soucier que les images SVG perdent leur qualit\u00e9 dans certains navigateurs ou lorsque vous les redimensionnez pour qu\u2019elles apparaissent \u00e0 diff\u00e9rents endroits.  <\/li>\n\n\n\n<li>Les fichiers SVG de base sont g\u00e9n\u00e9ralement plus petits que les images raster, qui sont cr\u00e9\u00e9es \u00e0 partir de nombreux pixels color\u00e9s au lieu d\u2019utiliser des algorithmes math\u00e9matiques. <\/li>\n\n\n\n<li>Parce que les fichiers SVG traitent le texte comme du texte (et non comme un design), les lecteurs d\u2019\u00e9cran peuvent scanner tout mot contenu dans les images SVG. C\u2019est tr\u00e8s utile pour les personnes qui ont besoin d\u2019aide pour lire les pages web. Les moteurs de recherche peuvent \u00e9galement lire et indexer le texte des images SVG.  <\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"desventajas-de-los-archivos-svg-782f4ecd-7218-49f7-ae8c-025c16d70744\">Inconv\u00e9nients des fichiers SVG<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Les fichiers SVG sont excellents pour les graphiques web comme les logos, les illustrations et les graphiques. Mais leur manque de pixels rend difficile l\u2019affichage de photographies num\u00e9riques de haute qualit\u00e9. Les fichiers JPEG sont g\u00e9n\u00e9ralement meilleurs pour les photographies d\u00e9taill\u00e9es.   <\/li>\n\n\n\n<li>Seuls les navigateurs modernes peuvent prendre en charge les images SVG. Il peut \u00eatre difficile d\u2019utiliser des fichiers SVG avec Internet Explorer 8 et d\u2019autres navigateurs plus anciens.  <\/li>\n\n\n\n<li>Le code contenu dans les images SVG peut \u00eatre difficile \u00e0 comprendre si vous d\u00e9butez avec ce format de fichier.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"como-anadir-una-imagen-svg-con-elementor-9b5703af-99e9-4483-b21d-119b4245a8a3\">Comment ajouter une image SVG avec Elementor<\/h2>\n\n<p class=\"wp-block-paragraph\">Il existe de nombreux widgets <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> qui nous permettent de t\u00e9l\u00e9charger des images ou des ic\u00f4nes au format SVG. Nous pouvons t\u00e9l\u00e9charger ce type de fichiers depuis la m\u00e9diath\u00e8que sans aucune restriction, mais si nous voulons le faire depuis le constructeur <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a>, nous devons d\u2019abord activer la capacit\u00e9 d\u2019Elementor \u00e0 t\u00e9l\u00e9charger ce type de fichiers. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"permitir-la-subida-de-archivos-sin-filtrar-91351259-80f5-4c26-8482-77e7dbc2f1b8\">Autoriser le t\u00e9l\u00e9chargement de fichiers non filtr\u00e9s<\/h3>\n\n<p class=\"wp-block-paragraph\">Cette fen\u00eatre contextuelle s\u2019affichera lorsque vous cliquerez sur le bouton <em>T\u00e9l\u00e9charger SVG<\/em> inclus dans certains widgets utilisant des ic\u00f4nes.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg\"><img decoding=\"async\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg\" alt=\"Autoriser le t&#xE9;l&#xE9;chargement de fichiers non filtr&#xE9;s\" class=\"wp-image-18243\"\/><\/a><\/figure>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/permitir_la_subida_de_archivos_sin_filtrar.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/permitir_la_subida_de_archivos_sin_filtrar.gif\" alt=\"Autoriser le t&#xE9;l&#xE9;chargement de fichiers non filtr&#xE9;s\" class=\"wp-image-4831\"\/><\/a><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">La premi\u00e8re fois que vous tenterez de t\u00e9l\u00e9charger une ic\u00f4ne SVG, un message d\u2019avertissement vous sera pr\u00e9sent\u00e9 pour vous alerter que le t\u00e9l\u00e9chargement de tout fichier, y compris les fichiers SVG, peut pr\u00e9senter un risque de s\u00e9curit\u00e9 potentiel. Si vous comprenez les risques encourus et acceptez de continuer, cliquez sur le bouton <strong>Activer<\/strong>. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"este-archivo-no-esta-permitido-por-motivos-de-seguridad-92de5326-9262-4b7e-9190-4ee1fda11bfe\">Ce fichier n\u2019est pas autoris\u00e9 pour des raisons de s\u00e9curit\u00e9<\/h3>\n\n<p class=\"wp-block-paragraph\">Vous verrez ce message en essayant de t\u00e9l\u00e9charger un fichier SVG depuis le widget <em>Image<\/em> ou un autre widget qui n\u2019est pas express\u00e9ment destin\u00e9 au t\u00e9l\u00e9chargement d\u2019ic\u00f4nes SVG.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/error-al-subir-un-archivo-svg.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"191\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/error-al-subir-un-archivo-svg.jpg\" alt=\"Ce fichier n&#x2019;est pas autoris&#xE9; pour des raisons de s&#xE9;curit&#xE9;\" class=\"wp-image-4832\"\/><\/a><\/figure>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif\" alt=\"Ce fichier n&#x2019;est pas autoris&#xE9; pour des raisons de s&#xE9;curit&#xE9;\" class=\"wp-image-4834\"\/><\/a><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">Vous pouvez r\u00e9soudre ce probl\u00e8me depuis la page <em>Elementor &gt; R\u00e9glages<\/em>. <\/p>\n\n<ol class=\"wp-block-list\">\n<li>Cliquez sur l\u2019onglet <strong>Avanc\u00e9<\/strong>.<\/li>\n\n\n\n<li>Dans <strong>Autoriser le t\u00e9l\u00e9chargement de fichiers non filtr\u00e9s<\/strong>, s\u00e9lectionnez <em>Activer<\/em> dans le menu d\u00e9roulant.<\/li>\n\n\n\n<li>Cliquez sur le bouton <strong>Enregistrer les modifications<\/strong>.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"cambiar-el-color-a-un-icono-svg--eed461c4-aec0-4d5e-a9ab-1012c9b89fe6\">Changer la couleur d\u2019une ic\u00f4ne SVG <\/h2>\n\n<p class=\"wp-block-paragraph\">Dans ce tutoriel, je vais utiliser le logiciel <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> pour cr\u00e9er ou modifier des fichiers SVG. Pour que nous puissions changer la couleur d\u2019une ic\u00f4ne SVG depuis le constructeur Elementor, les conditions suivantes doivent \u00eatre remplies : <\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li>Nous devons remplir avec la couleur <mark style=\"background-color:#000000\" class=\"has-inline-color has-colmena-gris-claro-color\"> #000000 <\/mark> (c\u2019est la couleur noire au format hexad\u00e9cimal) la totalit\u00e9 ou la partie de l\u2019ic\u00f4ne que nous voulons changer depuis le constructeur Elementor.<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"483\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg\" alt=\"S&#xE9;lecteur de couleur d&#x2019;Adobe Illustrator\" class=\"wp-image-4835\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg 710w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator-500x340.jpg 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator-600x408.jpg 600w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/a><\/figure>\n<\/div>\n<ul start=\"2\" class=\"wp-block-list\">\n<li>Dans <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a>, nous pouvons attribuer une couleur de contour (bordure) et une couleur de remplissage. Elementor ne changera que la couleur de remplissage, il est donc pr\u00e9f\u00e9rable de ne pas attribuer de couleur de contour \u00e0 l\u2019ic\u00f4ne et de ne laisser que la couleur de remplissage.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cambiar-color-con-adobe-illustrator.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cambiar-color-con-adobe-illustrator.gif\" alt=\"Changer la couleur avec Adobe Illustrator\" class=\"wp-image-4837\"\/><\/a><\/figure>\n\n<ul start=\"3\" class=\"wp-block-list\">\n<li>Lorsque nous enregistrons le fichier au format SVG, <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> nous affichera une bo\u00eete de dialogue d\u2019options SVG. Dans cette bo\u00eete, nous devons nous assurer que dans la section <em>Options avanc\u00e9es<\/em>, le s\u00e9lecteur <em>Propri\u00e9t\u00e9s CSS :<\/em> est r\u00e9gl\u00e9 sur l\u2019option <strong>Attributs de pr\u00e9sentation<\/strong>.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/guardar_archivo_svg.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/guardar_archivo_svg.gif\" alt=\"Enregistrer le fichier SVG\" class=\"wp-image-4838\"\/><\/a><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"donde-usar-nuestro-icono-en-el-constructor-de-elementor-9b48113e-277c-4456-95f4-e6387ecc6717\">O\u00f9 utiliser notre ic\u00f4ne dans le constructeur Elementor<\/h3>\n\n<p class=\"wp-block-paragraph\">Une fois que nous avons cr\u00e9\u00e9 notre ic\u00f4ne en suivant les directives pr\u00e9c\u00e9dentes, nous pouvons l\u2019utiliser dans le constructeur Elementor dans tous ces widgets :<\/p>\n\n<ul class=\"wp-block-list\">\n<li>BASIQUE\n<ul class=\"wp-block-list\">\n<li>Bouton.<\/li>\n\n\n\n<li>S\u00e9parateur.<\/li>\n\n\n\n<li>Ic\u00f4ne.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>PRO<ul><li>Formulaire.<\/li><li>Menu de navigation.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>Point chaud.<\/li>\n\n\n\n<li>Bo\u00eete \u00e0 bascule.<\/li>\n\n\n\n<li>Appel \u00e0 l\u2019action.<\/li>\n\n\n\n<li>Avis.<\/li>\n\n\n\n<li>Table des mati\u00e8res.<\/li>\n\n\n\n<li>Liste de lecture vid\u00e9o.<\/li>\n\n\n\n<li>Bouton PayPal.<\/li>\n\n\n\n<li>Bouton Stripe.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>G\u00c9N\u00c9RAL\n<ul class=\"wp-block-list\">\n<li>Bo\u00eete d\u2019ic\u00f4nes.<\/li>\n\n\n\n<li>Liste d\u2019ic\u00f4nes.<\/li>\n\n\n\n<li>Accord\u00e9on.<\/li>\n\n\n\n<li>Commutateur.<\/li>\n\n\n\n<li>Ic\u00f4nes sociales.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>INDIVIDUEL\n<ul class=\"wp-block-list\">\n<li>Infos de publication.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Nous pouvons \u00e9galement l\u2019utiliser comme logo du site et dans d\u2019autres widgets comme Image, mais sans la capacit\u00e9 de changer la couleur depuis Elementor.<\/p>\n<\/blockquote>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-icono.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-icono.gif\" alt=\"Ins&#xE9;rer une ic&#xF4;ne SVG dans Elementor\" class=\"wp-image-4839\"\/><\/a><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"enlaces-relacionados-04f3361a-2f20-49d7-b697-cb6cb84b3a0e\">Liens d\u2019int\u00e9r\u00eat<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Iconfinder : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\">https:\/\/www.iconfinder.com\/<\/a> (T\u00e9l\u00e9chargez des ic\u00f4nes au format SVG).<\/li>\n\n\n\n<li>IcoMoon : <a rel=\"noreferrer noopener\" href=\"https:\/\/icomoon.io\/\" target=\"_blank\">https:\/\/icomoon.io\/<\/a> (Cr\u00e9ez votre propre galerie d\u2019ic\u00f4nes au format .ico).<\/li>\n\n\n\n<li>Dribbble : <a rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/\" target=\"_blank\">https:\/\/dribbble.com\/<\/a> (Plus de 10\u202f000 ic\u00f4nes gratuites).<\/li>\n\n\n\n<li>Iconmonstr : <a rel=\"noreferrer noopener\" href=\"https:\/\/iconmonstr.com\/\" target=\"_blank\">https:\/\/iconmonstr.com\/<\/a> (ic\u00f4nes en noir et blanc avec de multiples variations, enti\u00e8rement gratuites).<\/li>\n\n\n\n<li>DevianArt : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.deviantart.com\/\" target=\"_blank\">https:\/\/www.deviantart.com\/<\/a> (Plus de 200\u202f000 ic\u00f4nes gratuites).<\/li>\n\n\n\n<li>Fontello : <a href=\"https:\/\/fontello.com\/\">https:\/\/fontello.com\/<\/a> (Des milliers d\u2019ic\u00f4nes monochromes gratuites de diff\u00e9rentes tailles et formats)<\/li>\n\n\n\n<li>Adobe Illustrator : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\">https:\/\/www.adobe.com\/es\/products\/illustrator.html<\/a> (Logiciel de graphiques vectoriels).<\/li>\n\n\n\n<li>1000 Free Downloads : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.1001freedownloads.com\/\" target=\"_blank\">https:\/\/www.1001freedownloads.com\/<\/a> (Plus de 1001 t\u00e9l\u00e9chargements gratuits).<\/li>\n\n\n\n<li>CSS Author : <a rel=\"noreferrer noopener\" href=\"https:\/\/cssauthor.com\/\" target=\"_blank\">https:\/\/cssauthor.com\/<\/a> (Des centaines des meilleurs ensembles d\u2019ic\u00f4nes gratuits dans diff\u00e9rents formats).<\/li>\n\n\n\n<li>GraphicBurger : <a rel=\"noreferrer noopener\" href=\"https:\/\/graphicburger.com\/\" target=\"_blank\">https:\/\/graphicburger.com\/<\/a> (Ensembles d\u2019ic\u00f4nes th\u00e9matiques gratuits).<\/li>\n\n\n\n<li>Flaticon : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\">https:\/\/www.flaticon.com\/<\/a> (Permet de convertir des ic\u00f4nes en polices t\u00e9l\u00e9chargeables pour les contr\u00f4ler en CSS).<\/li>\n\n\n\n<li>Icons8 : <a rel=\"noreferrer noopener\" href=\"https:\/\/icons8.com\/\" target=\"_blank\">https:\/\/icons8.com\/<\/a> (plus de 350\u202f000 ic\u00f4nes professionnelles gratuites).<\/li>\n\n\n\n<li>Freepik : <a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.freepik.com\/<\/a> (Plus de 872\u202f000 de ces ressources sont des ic\u00f4nes gratuites).<\/li>\n\n\n\n<li>Font Awesome : <a rel=\"noreferrer noopener\" href=\"https:\/\/fontawesome.com\/\" target=\"_blank\">https:\/\/fontawesome.com\/<\/a> (Comprend plus de 14\u202f000 ic\u00f4nes).<\/li>\n\n\n\n<li>Good Stuff No Nonsense : <a rel=\"noreferrer noopener\" href=\"https:\/\/goodstuffnononsense.com\/\" target=\"_blank\">https:\/\/goodstuffnononsense.com\/<\/a> (Ic\u00f4nes dessin\u00e9es \u00e0 la main gratuites en SVG, PNG, AI, EPS et PSD).<\/li>\n\n\n\n<li>The Noun Project : <a rel=\"noreferrer noopener\" href=\"https:\/\/thenounproject.com\/\" target=\"_blank\">https:\/\/thenounproject.com\/<\/a> (La plupart des ic\u00f4nes sont disponibles en PNG ou SVG).<\/li>\n\n\n\n<li>Iconshock : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.iconshock.com\/\" target=\"_blank\">https:\/\/www.iconshock.com\/<\/a> (Vaste biblioth\u00e8que de plus de 2 millions d\u2019ic\u00f4nes professionnelles).<\/li>\n\n\n\n<li>Pixeden : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.pixeden.com\/\" target=\"_blank\">https:\/\/www.pixeden.com\/<\/a> (La collection d\u2019ensembles d\u2019ic\u00f4nes gratuits n\u2019est pas particuli\u00e8rement \u00e9tendue).<\/li>\n\n\n\n<li>IconsFlow : <a rel=\"noreferrer noopener\" href=\"https:\/\/iconsflow.com\/\" target=\"_blank\">https:\/\/iconsflow.com\/<\/a> (IconsFlow met constamment \u00e0 jour sa biblioth\u00e8que).<\/li>\n\n\n\n<li>Streamline : <a href=\"https:\/\/www.streamlinehq.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.streamlinehq.com\/<\/a> (Plus de 85\u202f000 ic\u00f4nes uniques, professionnelles et con\u00e7ues en interne).<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vid\u00e9o pas \u00e0 pas Qu\u2019est-ce qu\u2019un fichier SVG ? Scalable Vector Graphics (SVG) est un format de fichier vectoriel adapt\u00e9 au web. Contrairement aux fichiers raster bas\u00e9s sur des pixels comme les JPEG, les fichiers vectoriels stockent les images via des formules math\u00e9matiques bas\u00e9es sur des points et des lignes sur une grille. Cela signifie [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Changer la couleur des ic\u00f4nes SVG dans Elementor","_seopress_titles_desc":"Qu\u2019est-ce qu\u2019un fichier SVG ? Scalable Vector Graphics (SVG) est un format de fichier vectoriel adapt\u00e9 au web. Contrairement aux fichiers raster bas\u00e9s sur\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"112","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[454],"tags":[431,442,428],"class_list":["post-6850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-conception-web","tag-elementor","tag-personnalisation-de-wordpress"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/comments?post=6850"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6850\/revisions"}],"predecessor-version":[{"id":6852,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6850\/revisions\/6852"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/6851"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=6850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/categories?post=6850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/tags?post=6850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}