Блог

Когда я пытаюсь добавить новые значки начальной загрузки к кнопке, кажется, что изображение несколько отключено:

Я мог бы добавить поле внизу, но это, похоже, во многом «обходной путь». Если я проверю код на: https://icons.getbootstrap.com/icons/x-circle / они также не используют никаких обходных путей, но там все выглядит так, как ожидалось.

Вот как я добавляю свою кнопку:

 <a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>
 

Одно небольшое отличие, которое я заметил, заключается в том, что если вы получаете значок с помощью шрифта icon вместо svg, это добавляет некоторое пространство поверх изображения, от которого я не могу избавиться с помощью каких-либо элементов управления дополнением.

Я следовал пошаговым инструкциям по «установке», и другие компоненты работают должным образом. Также font-awesome работает как шарм.

Есть идеи, как сделать это правильно?

РЕДАКТИРОВАТЬ: спасибо всем за ваши ответы до сих пор. Я просмотрел их все:

@vishal:

 <div style="text-align:center; width:100%;">
    <a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>
</div>
 

в результате кнопка выглядит следующим образом:

@George:

 <a href="#" type="button" class="d-flex justify-content-center align-items-center col-12 btn btn-danger"><i class="bi bi-x-circle pr-2"></i> Cancel</a>
 

Здесь мне пришлось расширить col-1 до col-12. Но и тогда это дало эту кнопку:

@camaulay: если я использую svg и изменяю ширину и высоту (устанавливаю оба значения на 20) и настраиваю положение окна просмотра на «0 0 20 20», результат на самом деле выглядит так, как ожидалось:

 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 20 20">
 

Поэтому я мог бы отметить это как правильный ответ. Тем не менее, мне интересно, почему <i> -Tag приводит к такому странному поведению?

Если я добавлю класс border к «изображению», то видно, что в верхней части изображения есть дополнительное пространство:

 <a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle pr-2 border"></i> Cancel</a>
 

Я думаю, это может вам помочь.

 <a href="#" type="button" class="d-flex justify-content-center align-items-center col-1 btn btn-danger"><i class="bi bi-x-circle"></i>Cancel</a>
 

Это известная ошибка, см. https://github.com/twbs/icons/issues/82 . Извините, что беспокою вас.

HTML

     <div class="center"> 
      <a href="#" type="button" class="btn btn-danger">
           <i class="bi bi-x-circle"></i> Cancel
      </a>
    </div> 
 

Css

  .center { 
    text-align:center; 
    width:100%; 
} 
 

На самом деле, в официальном примере к классу bi применяются некоторые дополнительные стили. Исправление было введено в этом извлечении.

Таким образом, сам стиль похож на этот:

 .bi {
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
}
 

Вы можете увидеть эффект для второй кнопки ниже:

 .bi {
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
} 

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-x-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
</svg>
                Cancel
</button>

<button type="button" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
</svg>
                Cancel
</button>