Bonjour,
Vous n’avez pas besoin d’ajouter de CSS personnalisé au SVG si vous souhaitez qu’il apparaisse avant le titre, car nous l’avons placé dans les balises <h2>, il utilisera donc les styles <h2>. Mais vous devez modifier la section du titre de recherche. Si je ne me trompe pas, cette capture d’écran que vous avez partagée ci-dessus provient de votre thème DarkPixlz’s Modern Theme ?
J’ai vérifié ce thème et je pense que le problème est que vous utilisez d’énormes marges intérieures et tailles de police pour aligner le titre au centre et qu’il n’y a pas assez d’espace pour l’icône de recherche.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
Ma suggestion :
J’utilise des marges plutôt que des marges intérieures, mais pas nécessaires sur les côtés - car .search-header a déjà 10% de marge intérieure sur les côtés - pour avoir suffisamment d’espace pour l’icône et utiliser une taille de police plus petite, surtout sur mobile. Pour corriger l’alignement vertical, vous pouvez ajouter une marge de 1em en haut, car votre .main-outlet a une marge intérieure de 3em en haut.
Probablement mieux de voir si je change l’arrière-plan.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // utiliser une taille de police plus petite sur un écran plus petit
text-align: center;
}