Невозможно изменить размер значка в кнопке HTML

Question

Я хочу, чтобы моя иконка в моей кнопке была больше. Я смотрю вверх, но не могу понять, как. Это мой код.

<div class="row mb-5">
  <div class="col">
    <button class="btn btn-info text-white">
      <span class=" icon-format_list_bulleted mr-1 wrap-icon"></span>
      <br />
      Inventory
    </button>

    <button class="btn btn-info text-white">
      <span class="icon-cutlery mr-1 wrap-icon"></span>
      <br />
      Meal
    </button>

    <button class="btn btn-info text-white">
      <span class="icon-library_books mr-1 wrap-icon"></span>
      <br />
      Report
    </button>
  </div>
</div>

Answer 1

Значки на самом деле являются символами специального шрифта (помните WingDings?). Таким образом, они могут быть отформатированы с помощью атрибутов стиля, связанных со шрифтом, таких как font-size, color, font-weight, line-height, et c. В этом случае:

.btn-info span {
  font-size:32px;
}

Думайте о значках, как это:

.my-icon.wrap-icon::before {
  content: "a";
  font-family: Webdings!important;
}