How can I style a round icon element inside a bordered oval?

user_17866110 0
Viewed 66

I am trying to code this:

goal

But I struggle with how to deal with different colors in borders and stuff. So far, I have in my html code:

.buttonfilter {
  color: #0065FC;
  background-color: #DEEBFF;
  height: 20px;
  width: 20px;
  padding: 5px;
  text-align: center;
  border-radius: 50%;
}
<div class="buttonfilter"><i class="fas fa-dog"></i></div> Animaux autorisés

Rendering this: kek

Any idea how to keep the text aligned on line + keeping the light blue circle and adding the grey border ?

css html
3 Answers

Here is an example to do this.

.wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 50px; /* circle width */
  width: fit-content;
}

.circle {
  border-radius: 50%;
  background-color: #DEEBFF;
  width: 50px;
  height: 50px;
  margin-left: -1px; /* border-width of wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
}

.label {
  margin: 0 10px;
}
<div class="wrapper">
  <div class="circle">
    
  </div>
  <div class="label">Animaux autorisés</div>
<div>

user_50440340

A combination of flexbox and negative margin does the job, along with tweaks to spacing.

.buttonfilter {
  box-sizing: border-box; /* include padding in sizing for simplicity */
  display: inline-flex; /* add flex properties to this element and children */
  align-items: center; /* center children on the cross axis (vertically) */
  height: 40px;
  padding-right: 15px;
  border-radius: 20px; /* half the height of the element */
  border: 2px solid #e3e3e3;
  font-family: Arial;
  font-weight: bold;
}

.buttonfilter i {
  color: #0065FC;
  background-color: #DEEBFF;
  width: 40px;
  height: 40px;
  margin-left: -2px; /* pull icon over left border */
  border-radius: 50%;
  margin-right: 10px; /* add space between icon and text */
  display: flex; /* apply flex layout so we can position child pseudo-element */
  align-items: center; /* center icon on cross axis (vertically) */
  justify-content: center; /* center icon on main axis (horizontally) */
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="buttonfilter"><i class="fas fa-dog"></i> Animaux autorisés</div>

user_12648040

This may work for your purposes, to quickly change the color of the border.

.buttonfilter {
  color: #0065FC;
  background-color: #DEEBFF;
  height: 20px;
  width: 20px;
  padding: 5px;
  text-align: center;
  border-radius: 50%;
  outline: 5px single gray;
}
<div class="buttonfilter"><i class="fas fa-dog"></i></div> Animaux autorisés

user_175349010
Related