如何在圆形bootstrap 4表单输入/按钮中添加svg图标？

Question

我正在使用Bootstrap 4进行​​Angular项目，我想将使用svg和iconmoon创建的图标字体添加到按钮和表单输入中，如下图所示：

Answer 1

您可以使用input-group-append CSS类在输入的末尾添加内容：

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

Answer 2

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>

但是：ぁzxswい

---

相关：https://www.codeply.com/go/bv4I8WXfWE