Hallo,
Sie müssen keine benutzerdefinierten CSS für SVG hinzufügen, wenn es vor dem Titel erscheinen soll, da wir es in die h2-Tags gesetzt haben, sodass es die h2-Stile verwendet. Sie müssen jedoch den Suchtitelbereich ändern. Wenn ich richtig liege, stammt dieser Screenshot, den Sie oben geteilt haben, von Ihrem Theme DarkPixlz’s Modern Theme?
Ich habe dieses Theme überprüft und glaube, dass das Problem darin besteht, dass Sie riesige Abstände und Schriftgrößen verwenden, um den Titel zu zentrieren, und nicht genügend Platz für das Suchsymbol ist.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
Mein Vorschlag:
Ich verwende Ränder anstelle von Abständen, aber nicht an den Seiten – da .search-header bereits 10 % Abstand an den Seiten hat –, um genügend Platz für das Symbol zu haben und eine kleinere Schriftgröße zu verwenden, insbesondere auf Mobilgeräten. Um die vertikale Ausrichtung zu beheben, können Sie einen oberen Rand von 1em hinzufügen, da Ihr .main-outlet einen oberen Rand von 3em hat.
Wahrscheinlich besser, wenn ich den Hintergrund ändere.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // kleinere Schriftgröße auf kleineren Bildschirmen verwenden
text-align: center;
}