如何将文本放在创建的图标中？

在UI设计中，将文本放在图标中可以提高界面的可读性和美观度。以下是常见的将文本放在图标中的实现方法：

1. 使用图标字体

图标字体是一种特殊的字体，其中包含了各种图案、符号和图标。在HTML/CSS中，我们可以通过在文本中添加对应的CSS class来显示出相应的图标。

例如，使用Font Awesome图标字体库中的"fa"类可以在文本中添加各种图标：

<i class="fa fa-search"></i> Search
<i class="fa fa-facebook"></i> Facebook

在上面的代码中，我们使用<i>标签来渲染图标，并通过类名fa和fa-search来指定要显示的图标。

2. 使用CSS背景图

CSS背景图是一种将图片作为元素的背景的CSS属性。通过使用CSS背景图，我们可以将文本嵌入到背景图片中。

例如，我们可以创建一个包含搜索图标的链接，并将文本嵌入到搜索图标中：

<a href="#" style="background-image: url('search-icon.png'); padding-left: 20px;">Search</a>

在上面的代码中，我们通过设置样式background-image来设置背景图片，并通过padding-left属性来控制文本距离图标的距离。

3. 使用SVG图标

SVG是一种基于XML语法的矢量图形格式，可以在任何分辨率下无损缩放。在SVG中，我们可以将文本与图标嵌入到同一文件中，从而实现文本图标的组合。

例如，我们可以创建一个包含搜索图标的SVG文件，并在其中添加文本：

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <path d="M12.997 11.739l5.348 5.354c0.488 0.488 0.488 1.281 0 1.77l-1.768 1.768c-0.489 0.487-1.281 0.487-1.77 0l-5.348-5.354c-3.669 2.694-8.851 2.035-12.056-1.166-3.375-3.375-3.375-8.85 0-12.225s8.851-3.375 12.225 0c3.201 3.201 3.86 8.39 1.166 12.056zM6.687 6.681c-2.945 2.944-2.945 7.72 0 10.664 2.944 2.944 7.72 2.945 10.665 0 2.943-2.945 2.943-7.72 0-10.664-2.944-2.944-7.72-2.945-10.665 0z"/>
  <text x="0" y="15">Search</text>
</svg>

在上面的代码中，我们使用<path>标签来绘制搜索图标，并使用<text>标签在图标下面添加文本。

总结

以上是三种将文本放在图标中的常见方法。设计师和开发者可以根据实际需要和个人喜好选择其中的一种或多种方法来实现文本图标的组合。