# 使用主题制作搜索图标

**URL:** https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929
**Category:** Support
**Created:** [2022年八月3日 04:21 UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929 "2022-08-03T04:21:04Z")
**Posts on this page:** 1
**Showing post:** 6

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2022年八月4日 09:44 UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/6 "2022-08-04T09:44:21Z")

</div>

你好，

如果你想让 SVG 出现在标题之前，就不需要添加自定义 CSS，因为我们已经将其放在了 `<h2>` 标签内，它将使用 `<h2>` 的样式。但你必须修改搜索标题部分。如果我没记错的话，你上面分享的截图来自你的主题 [DarkPixlz’s Modern Theme](https://meta.discourse.org/t/darkpixlzs-modern-theme/232543)？

我检查了那个主题，我认为问题在于你使用了巨大的内边距和字体大小来将标题居中，导致搜索图标没有足够的空间。

 ![Screenshot 2022-08-04 at 10.40.38](https://global.discourse-cdn.com/meta/original/4X/7/2/f/72fb8f2e1361c4334a7b0e994d0ca5e1a208c5d9.png)

```scss
.search-container .search-page-heading {
  padding: 2em 3.8em;
  font-size: 5em;
}

```

* * *

我的建议：

我使用外边距而不是内边距，但不需要在两侧添加——_因为 `.search-header` 已经在两侧有 10% 的内边距_——以便为图标留出足够的空间，并使用较小的字体大小，尤其是在移动设备上。要修复垂直对齐，你可以像 `.main-outlet` 在顶部有 3em 的内边距一样，在顶部添加 1em 的外边距。

 ![Screenshot 2022-08-04 at 11.17.52](https://global.discourse-cdn.com/meta/original/4X/3/6/6/36618d57e94d3ba3fe891ddfebfbda58e39f737a.png)

如果我改变背景，可能会更好看。

 ![Screenshot 2022-08-04 at 11.33.56](https://global.discourse-cdn.com/meta/original/4X/1/3/f/13f142fb2d32395db3c3957b9c2243660827744e.png)

```scss
.search-container .search-page-heading {
  margin: 1em 0 2em 0;
  font-size: 5em; // 在较小的屏幕上使用较小的字体大小
  text-align: center;
}

```

---

_[View the full topic](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929)._