如何将这个 flex 容器中的图标向左移动？

Question

我有一个带有文本和图标的药丸容器，这是它目前的样子：

但是我希望图标更靠左，看起来像这样：

我该怎么办？

这是我的代码：

<span class="healthy">
  <a href="#"> 
    <div className="template-pill">
      <img className="pill-icons" src={healthy_logo} />
      <p> Healthy </p>
    </div>
  </a>
</span>

这是我的造型：

.healthy a {
  display: inline-block;
  border-radius: 1em;
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  background: #62AC00;
  color: #FFFFFF;
  padding: 4px 12px;
  margin-right: 10px;
  vertical-align: top;
  text-decoration: none;
}

.healthy:link, .healthy:visited {
  color: #FFFFFF;
  text-decoration: none;
}
.template-pill {
  display: flex;
  align-items: center;
  height: 20px;
}

.pill-icons {
  height: 20px;
  width: 20px;
  padding-right: 5px;
}

任何帮助，将不胜感激！ 非常感谢！

Answer 1

首先减少healthy a填充它的 12 现在使它更低，

.healthy a {
     padding: 4px 6px;
     
}

并且您可以通过向p标签添加margin-left将文本推开

p:{

     margin-left: 10px;

}

Answer 2

您可以使用margin-left: -X px将图标移到左侧。 这里 X 是你想要的 px 值。 你需要做的就是给它img标签。

.pill-icons { margin-left: -5px; }