안녕하세요,
제목 앞에 표시되도록 하려면 SVG에 사용자 지정 CSS를 추가할 필요가 없습니다. 이미 h2 태그 안에 넣어두었기 때문에 h2 스타일이 적용됩니다. 다만 검색 제목 섹션을 수정해야 합니다. 제가 맞다면, 위에서 공유하신 스크린샷은 테마 DarkPixlz’s Modern Theme의 것인가요?
해당 테마를 확인해 본 결과, 제목을 중앙 정렬하기 위해 패딩과 폰트 크기를 크게 설정하고 있어 검색 아이콘에 충분한 공간이 확보되지 않는 것으로 보입니다.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
제안 사항:
패딩 대신 마진을 사용하되, 양쪽에는 적용할 필요가 없습니다. .search-header에 이미 양쪽 10%의 패딩이 있기 때문입니다. 아이콘에 충분한 공간을 확보하기 위해, 특히 모바일에서는 더 작은 폰트 크기를 사용하세요. 세로 정렬을 수정하려면, .main-outlet에 상단 3em의 패딩이 있으므로 상단에 1em의 마진을 추가할 수 있습니다.
배경을 변경하면 더 나아 보일 것입니다.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // 작은 화면에서는 더 작은 폰트 크기를 사용하세요
text-align: center;
}