Как заставить кнопку следовать форме ее содержимого с помощью Font Awesome 5? - PullRequest
Новая
       53

Как заставить кнопку следовать форме ее содержимого с помощью Font Awesome 5?

1 голос
/ 04 февраля 2020

Можно ли изменить форму button на его содержимое? В этом случае я использую значок «fa-tra sh -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>"

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Идея состоит в том, чтобы полагаться на 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, где вы можете убедиться, что вся область принадлежит пути.

В вашем конкретном случае, вы можете добавить псевдоэлемент, чтобы покрыть внутри части и вернуть ваше взаимодействие с мышью: 

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>
0 голосов
/ 04 февраля 2020

Вы можете добавить вместо button_border class - border-0, если вы используете bootstrap. 

<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 класс и добавить нужный цвет. 

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

Есть много способов.

...