CODEWITHSUNDEEP
htmlcssreactjs
Tony Hoan Trinh
Tony Hoan Trinh

Reputation: 495

How to move the icon in this flex container to the left?

I have this pill container with text and an icon and this is what it currently looks like:

enter image description here

However I want the icon to be more to the left and look like this:

enter image description here

How would I go about this?

This is my code:

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

And this is my styling:

.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;
}

Any help would be appreciated! Thank you so much!

Upvotes: 0

Views: 714

Answers (2)

Janitha Rasanga
Janitha Rasanga

Reputation: 1126

You can get icon to left side using margin-left: -X px. Here X is your desire px value. You need to do is give it to img tag.

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

Upvotes: 0

Sarkar
Sarkar

Reputation: 1899

First thing reduce the healthy a padding its 12 now make it lower,

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

and you can push the text away with a margin-left add to the p tag

p:{

     margin-left: 10px;

}

Upvotes: 1

Related Questions