文本框内的图标-几乎像glyphicon图标

Question

我有一个文本框，需要在其中添加符号。该符号应始终可见，并且不能在后面的代码中使用（获得文本框的值时）-基本都像glymphicon图标。我试过使用跨度，但未显示应有的方式。

这就是我所做的：

    <div class="input-group">
         <span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
         @Html.TextBoxFor(m => m.AgreedValue, new { @class = "form-control", placeholder = "Agreed Value" })                                
    </div>

这是当前的显示方式：

这就是我需要显示的内容：

我有什么想念的吗？或如何使它看起来像第二张图片？

Answer 1

这与样式有关，如果可以更改HTML，那么这是我的解决方案：

.input-group {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

.input-text {
  border: none;
  height: 100%;
  width: 100%;
  background: transparent;
  padding-left: 10px;
}
.input-text:focus {
outline: none;
}
.input-group {
padding-left: 10px;
width: 300px;
height: 40px;
border: 1.5px solid rgba(0,0,0,0.2);
box-sizing: border-box;
border-radius: 4px;
}

    <div class="input-group">
         <div>
         <span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
         </div>
         <input type="text" class="input-text">                               
    </div>