How to make a button follow the shape of its content using Font Awesome 5?

Question

Is it possible to change the shape of a button to that of its content? In this case I am using the "fa-trash-alt" icon and have a button that has hover effects that I only want to show for the icon instead of the whole rectangle.

Button:

<button type='button' id='{0}' onClick='delete_row(this.id)' style ='font-size:17px' class='btn btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt '></i></button>"

Answer 1

On idea is to rely on the SVG version of the icon and consider pointer-events to enable the interaction on the path only but the hover will not work inside the icon since visually it's not a part of the path.

Here is an example to illustrate.

button {
  font-size:80px;
  margin:10px;
  pointer-events:none;
  border:none;
  background:none;
}
svg {
  border:1px solid red;
}
svg path{
  pointer-events:auto;
}

button:hover path{
  fill:red;
}

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>

<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='fas fa-trash-alt '></i></button>

<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt '></i></button>

You may consider a different icon or a different SVG where you can make sure the whole area belong to the path.

---

In your particular case, you can add pseudo element to cover the inside part and get back your mouse interaction:

button {
  margin:10px;
  pointer-events:none;
  border:none;
  background:none;
  padding:0;
  position:relative;
}
button:before,
button:after{
  content:"";
  position:absolute;
  bottom:0.12em;
  left:0.12em;
  right:0.12em;
  top:0.2em;
  pointer-events:auto;
}
button:after{
  top:0.1em;
  height:0.2em;
  left:0.24em;
  right:0.24em;
}

svg path{
  pointer-events:auto;
}

button:hover path{
  fill:red;
}

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>

<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn fa-10x btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt'></i></button>

<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn fa-5x  btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt'></i></button>

<button type='button' id='{0}' onClick='delete_row(this.id)' class='btn fa-3x  btn-outline-danger button_border' data-toggle='modal' data-target='#exampleModalCenter'><i class='far fa-trash-alt'></i></button>