如何在文本前添加尺寸适配的图标

下面给你两种简单易上手的实现方法，都是适合CSS新手的方案，能让图标自动匹配文本尺寸：

方法一：内联元素对齐（基础通用） #

这种方法用相对单位em让图标高度自动跟随文本字号，再通过垂直对齐让图标和文本居中：

HTML代码 #

<div class="icon-text">
  <img src="/wp-content/uploads/2022/10/phone.png" alt="WhatsApp图标" class="custom-icon">
  Escríbenos por WhatsApp
</div>

CSS代码 #

.icon-text {
  /* 这里设置文本字号，图标会自动匹配 */
  font-size: 16px;
  line-height: 1.5;
}

.custom-icon {
  height: 1em; /* 1em等于当前文本字号，文本变大图标跟着变大 */
  width: auto; /* 保持图标原有宽高比，避免拉伸变形 */
  vertical-align: middle; /* 让图标和文本垂直居中对齐 */
  margin-right: 8px; /* 图标和文本之间留一点间距，更美观 */
}

方法二：Flex布局（直观易维护） #

Flex布局能更简单地控制对齐，新手更容易理解：

HTML代码 #

<div class="icon-text-flex">
  <img src="/wp-content/uploads/2022/10/phone.png" alt="WhatsApp图标" class="custom-icon-flex">
  Escríbenos por WhatsApp
</div>

CSS代码 #

.icon-text-flex {
  font-size: 18px; /* 自定义文本大小 */
  display: flex; /* 启用flex布局 */
  align-items: center; /* 一键实现图标和文本垂直居中 */
  gap: 8px; /* 控制图标和文本的间距，比margin更直观 */
}

.custom-icon-flex {
  height: 1em; /* 同样用em匹配文本字号，自动适配 */
  width: auto;
}

注意事项 #

• 尽量用透明背景的PNG图标，避免多余背景破坏视觉效果
• 如果图标显示异常，检查是否有其他CSS样式（比如父元素的padding、margin）干扰
• em是相对单位，会继承父元素的字号，所以修改文本字号时，图标会自动同步尺寸，不用手动调整

内容的提问来源于stack exchange，提问作者José Murrieta