为什么Glyphicons不显示在bootstrap的文本框中？

Question

我是bootstrap的新手，想在文本框中使用Glyphicons，为此目的写下这段代码：

<div class="inner-addon left-addon">
  <i class="glyphicon glyphicon-user"></i>
  <input type="text" class="form-control" />
</div>

但告诉我这个：

我怎样才能将Glyphicons显示在文本框中呢？谢谢。

Answer 1

你真的可以，但你可以这样伪装：

<div style="border: 1px solid #DDD;">
<i class="glyphicon glyphicon-user" ></i>
    <input style="border: none;"/>
</div>

简短的回答是，因为您无法将实际图标放在＆＃34;值＆＃34;在输入内部属性，您无法将glyphicon放在那里。但这种方式在视觉上看起来与用户类似。

Answer 2

设置glyphicon position: absolute;和父div relative：

＆＃13;

＆＃13;

.inner-addon {
  position: relative;
  /* margin just for breathe from viewport */
  margin-top: 20px;
}

input {
  /* give text some indent so it doesn't collapse with icon */
  text-indent: 18px;
}

.glyphicon.glyphicon-user {
  position: absolute;
  /* Adjust coordinates as desired */
  top: 10px;
  left: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="inner-addon left-addon">
  <i class="glyphicon glyphicon-user"></i>
  <input type="text" class="form-control" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

请检查此代码..

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div

CSS

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }