Как добавить значок SVG в округлую форму начальной загрузки 4 кнопки / кнопки?

Question

Я использую Bootstrap 4 для проекта Angular, и я хотел бы добавить значок шрифта, который я создал, используя svg и iconmoon, в кнопки и формы ввода, как на этих изображениях:

Answer 1

Новый класс округлые таблетки в Bootstrap 4 хорошо подходит для этого ...

Округленная группа ввода:

       <div class="input-group">
            <input class="form-control py-2 rounded-pill mr-1 pr-5" type="text" value="input">
            <span class="input-group-append">
                <button class="btn rounded-pill border-0 ml-n5" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
        </div>

Округлая кнопка:

       <button class="btn btn-primary btn-block rounded-pill">
            Facebook <i class="fa fa-facebook mt-1 float-left"></i>
        </button>

Демонстрация: https://www.codeply.com/go/bv4I8WXfWE

Похожие: Поиск ввода с иконкой Bootstrap 4 с закругленным текстовым полем

Answer 2

Вы можете использовать класс CSS input-group-append для добавления содержимого в конце ввода:

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">
      <img src="icon.svg" alt="Check icon">
    </span>
  </div>
</div>