如何在多选问答游戏的按钮内添加小图标？

首先排查最可能导致图标不显示的核心问题：图片路径错误。如果rose.png不在HTML文件的同级目录，需要修正路径，比如放在assets/images文件夹下就写成src="./assets/images/rose.png"，确保浏览器能正确加载图片。

接下来是正确的实现方案，让图标和选项文字在按钮内并排显示：

步骤1：修改HTML结构 #

在按钮内部同时放入图标和选项文本，结构如下：

<div id="gameChoices">
  <div class="row">
    <div class="left half">
      <div class="container">
        <button id="buttonOne" data-index="0">
          <img src="rose.png" alt="玫瑰图标" width="30" height="30">
          <span>选项一文本</span>
        </button>
      </div>
    </div>
    <div class="left half">
      <div class="container">
        <button id="buttonTwo" data-index="1">
          <img src="lily.png" alt="百合图标" width="30" height="30">
          <span>选项二文本</span>
        </button>
      </div>
    </div>
  </div>
  <!-- 另外两个按钮按相同逻辑修改 -->
</div>

步骤2：添加CSS布局样式 #

默认情况下图片和文字可能会排版错乱，添加以下CSS让图标和文字横向对齐，同时优化按钮样式：

/* 按钮内部用flex布局，实现图标和文字居中对齐 */
button {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 控制图标和文字的间距 */
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 确保图片适配按钮空间，不会变形或溢出 */
button img {
  object-fit: contain;
}

之前方法失效的原因 #

• 第一、三、四种方法：大概率是图片路径错误，浏览器无法找到资源导致图标不显示；也可能是按钮未设置内边距/高度，图标被挤压无法展示。
• 第二种方法：图标放在按钮外部，默认是块级元素，自然会独占一行，和按钮分开显示。

内容的提问来源于stack exchange，提问作者Tevin Mosley