如何在文本顶部获取图标

Question

我正在尝试在文本顶部添加图标（png 文件）并使其看起来像这样。我也想让它保持响应。

但是我的图标在一边，我似乎无法弄清楚如何做到这一点。尝试调整填充、项目对齐、更改位置设置等。我可能可以使用顶部和左侧命令调整图标位置，但这会破坏响应能力。有什么帮助吗？

.icon {
    width: 100px;
    height: auto;
    margin: 0 0 15px 0;   
}

.rows {
    display: flex;
    flex-direction: row; 
    width: 95%;
    top: 13em;
    float: right;
    position: relative;
    border-style: solid;
    
}

.feature {
    
    text-align: center;
    line-height: 24px;
    min-width: 31%;
    
}

.feature h3 {
    color: #f98673;
    margin-bottom: 10px;
}

.feature p {
    color: #fff;
    margin-bottom: 0;
  }

<div class = "rows">
            <div class="feature">
                <img src="group.png" class="icon" />
                <h3>Watch or listen together</h3>
                <p>
                  Start a session and invite your friends by sharing your friend code with them.
                </p>
              </div>
              <div class="feature">
                <img src="list.png" class="icon" />
                <h3>Build up the queue</h3>
                <p>
                  Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
                </p>
              </div>
              <div class="feature">
                <img src="chat.png" class="icon" />
                <h3>Use enhanced features</h3>
                <p>
                  New features are added on top of streaming websites such as real-time chat and timestamp markers.
                </p>
              </div>
              </div>

Answer 1

您可以通过将图标和下面的文本包装在另一个 div 中并像这样应用 flex 来实现这一点：

<div style="display:flex;flex-direction:column">
<img src="group.png" class="icon" />
<h3>Watch or listen together</h3>
</div>