I’m getting this weird bars over and under the font awesome icon, I have tried removing the borders, margin, padding and even making the background transparent, none of them seem to work.

enter image description here

I have the following CSS applied

.shade-btn {
  border: none;
  margin-left: 1rem;
  padding: 0;
  display: inline-block;
  color: white;
  font-size: 1.7rem;
}

button.shade-btn span {
  border: none;
  background-color: #00061ace;
  padding: 0;
  margin: 0;
}

for the html

<button type="button" id="update-list" class="shade-btn">
   <span class="fa-regular fa-pen-to-square"></span>
</button>

<button type="button" id="delete-list" class="shade-btn">
   <span class="fa-regular fa-trash-can"></span>
</button>

Thank you 🙂