输入内部的响应式图标

这是Treehouse作者的一些代码，显示了如何在输入中放置图标。

HTML：

CSS：

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
  margin: 30px;
}

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
}

.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input {
  text-indent: 32px;
}

.search .fa-search {
  position: absolute;
  top: 10px;
  left: 10px;
}

证明它的笔：http : //codepen.io/jamesbarnett/pen/aBnbL#0

您如何将图标放在输入的末尾，并使其对屏幕的变化做出响应？

我尝试使用折线定位该图标，但是它根本不起作用。这是我的尝试的小提琴：

http://jsfiddle.net/x7j869g7/2/

你可以给display:inline-block;和position:relative给.search然后对齐图标右侧（right: 10px）。

杰斯菲德尔

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
 body {
  margin: 30px;
}
.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
  display: inline-block;
}
.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
  text-indent: 5px;
  padding-right: 30px;
  box-sizing: border-box;
}
.search .fa-search {
  position: absolute;
  top: 8px;
  right: 10px;
}