Здравствуйте,
Вам не нужно добавлять кастомный CSS для SVG, если вы хотите, чтобы он отображался перед заголовком, так как мы разместили его внутри тегов h2, поэтому он будет использовать стили h2. Однако вам нужно изменить секцию заголовка поиска. Если я не ошибаюсь, приведенный выше скриншот сделан из вашей темы DarkPixlz’s Modern Theme?
Я проверил эту тему и считаю, что проблема в том, что вы используете большие отступы (padding) и размер шрифта для центрирования заголовка, из-за чего для иконки поиска не остаётся достаточно места.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
Мое предложение:
Вместо отступов (padding) используйте внешние отступы (margins), но не по бокам — так как у .search-header уже есть отступы 10% по бокам — чтобы освободить место для иконки, а также уменьшите размер шрифта, особенно на мобильных устройствах. Чтобы исправить вертикальное выравнивание, добавьте верхний отступ (margin) в 1em, так как у .main-outlet есть верхний отступ (padding) в 3em.
Возможно, будет лучше, если я изменю фон.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // используйте меньший размер шрифта на экранах меньшего размера
text-align: center;
}