响应的fa-icon里面的输入 [英] Responsive fa-icon inside of input

问题描述

这里是来自Treehouse作者的一些代码，显示如何在输入内放置图标。

Here is some code from a Treehouse-author showing how to place an icon inside of a input.

HTML：

<div class="search">
  <span class="fa fa-search"></span>
  <input placeholder="Search term">
</div>

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

如何将图标放在输入的末尾，并且能够响应屏幕的更改？

How can you put the icon at the end of the input and have it be responsive to a changing of the screen?

我尝试使用percetage定位的图标，但它没有工作。
这是一个我的尝试的小提琴：

I tried using a percetage positioning the icon but it did not work at all. Here is a fiddle with my attempt:

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

推荐答案

您可以给予 display：inline-block; 和 position：relative 到 .search 图标到右侧（ right：10px ）。

You can give display:inline-block; and position:relative to .search and then align icon to the right side(right: 10px).

Jsfiddle

@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;
}

<div class="search">
  <span class="fa fa-search"></span>
  <input type="text">
</div>

这篇关于响应的fa-icon里面的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！