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

Question

我将 Bootstrap 4 用于 Angular 元素，我想将我使用 svg 和 iconmoon 创建的图标字体添加到按钮和表单输入中，如下图所示:

Answer 1

Bootstrap 4 中新的rounded-pill 类很适合这个...

圆形输入组:

       <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

---

相关:Search input with an icon Bootstrap 4 with rounded textbox