Ciao,
Non è necessario aggiungere CSS personalizzato all’SVG se vuoi che appaia prima del titolo, poiché lo abbiamo inserito nei tag <h2>, quindi utilizzerà gli stili di <h2>. Tuttavia, devi modificare la sezione del titolo di ricerca. Se non ricordo male, questo screenshot che hai condiviso sopra è del tuo tema DarkPixlz’s Modern Theme?
Ho controllato quel tema e penso che il problema sia che hai usato enormi padding e font-size per allineare il titolo al centro e non c’è abbastanza spazio per l’icona di ricerca.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
Il mio suggerimento:
Ho usato margini invece di padding, ma non sono necessari ai lati - poiché .search-header ha già un padding del 10% sui lati - per avere abbastanza spazio per l’icona e ho usato un font-size più piccolo, specialmente sui dispositivi mobili. Per correggere l’allineamento verticale, puoi aggiungere un margine di 1em in alto, poiché il tuo .main-outlet ha un padding di 3em in alto.
Probabilmente è meglio vedere se cambio lo sfondo.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // usa un font-size più piccolo su schermi più piccoli
text-align: center;
}