如何使用 Font Awesome 5 使按钮跟随其内容的形状？

Question

是否可以将 button 的形状更改为其内容的形状？在这种情况下，我使用 "fa-trash-alt" 图标并有一个 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

我的想法是依靠图标的 SVG 版本并考虑 pointer-events 仅在路径上启用交互但悬停在图标内不起作用，因为在视觉上它不是路径的一部分.

这里举例说明。

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>

您可以考虑使用不同的图标或不同的 SVG，以确保整个区域都属于该路径。

在您的特定情况下，您可以添加伪元素来覆盖 inside 部分并恢复鼠标交互：

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>

Answer 2

如果您使用 bootstrap.

，您可以添加 button_border class - border-0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js"></script>

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

或者你可以只留下 btn class 并添加你想要的颜色。

.red-button [class*=fa] {
  color: #dc3545;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js"></script>

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

或者您可以使用其他适合您的元素，例如 span

.red-button [class*=fa] {
  color: #dc3545;
}

.red-button {
  cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js"></script>

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

有很多方法。

如何使用 Font Awesome 5 使按钮跟随其内容的形状？

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

html

css

button

font-awesome

font-awesome-5