文本框内的图标 - 几乎像 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>