如何使用 CSS 和 HTML 在文本字段旁边使用 fa-plus-circle 图标？

Question

我想在文本字段旁边使用 fa-plus-circle 项，如下所示。我怎样才能使用 CSS 和 HTMl 来实现它。我现在没有使用任何 CSS，因为它影响到所有其他使用 fa-plus-circle 的地方。

.html

 <div class="col-sm-6">
        <label class="col-sm-3 col-form-label" >My Name <span class="fa fa-star required-field"></span> </label>
         <input type="text" class="form-control"><span
             class="fa fa-plus-circle text-success cursor-point"></span>
    </div>

Answer 1

试试这个方法

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6">
    <div class="d-flex align-items-center">
        <div class="flex-fill">
            <input type="text" class="form-control">
        </div>
        <span class="ml-3 fa fa-plus-circle text-success cursor-point"></span>
    </div>
</div>

Answer 2

https://getbootstrap.com/docs/5.0/forms/input-group/

您可以为此使用输入组

<div class="input-group mb-3">
  <input type="text" class="form-control">
  <span class="input-group-text">
    <span class="fa fa-plus-circle text-success cursor-point"></span>
  </span>
</div>

如何使用 CSS 和 HTML 在文本字段旁边使用 fa-plus-circle 图标？

How to use fa-plus-circle icon next to a text field using CSS and HTML?

html

css

textfield

font-awesome