如何将字体真棒图标放入输入类型文本[重复]答案

【问题标题】：How to get font awesome icon into input type text [duplicate]如何将字体真棒图标放入输入类型文本[重复]
【发布时间】：2017-01-10 18:37:58
【问题描述】：

我正在尝试将字体真棒图标转换为文本输入类型。

但是可以得到想法并且它不起作用。

如下图所示。

.search_location{
    padding: 9px 10px 8px 10px;
    background: #fff;
    color: #777777;
    position: relative;
}
i.icon-map-marker 
{ 
  position: absolute; 
  top: 10px; 
  left: 50px;
}

<p>
 <input type="text" class="search_location" value="Choose Location">
<i class="icon-map-marker"></i>
</p>

【问题讨论】：

你必须将父元素 p 改为 position: relative 而不是那个输入元素
也试过了，但没用

标签： html css font-awesome

【解决方案1】：

你可以试试这个：

    p{
      position: relative;
      font-family: 'FontAwesome';
    }
    p::after{
        position: relative;
        left: -20px;
        content: "\f002";
    }
    input{
      padding-right: 20px;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
     <input type="text" class="search_location" value="Choose Location">
    </p>

content 是您的图标 unicode。您还必须指定font-family，以便它使用font awesome（在他们的图标页面上可以找到unicode）。

https://jsfiddle.net/h6877894/2/

【讨论】：

同样的事情，我想要在右上角的精确字体真棒，就像在图像中一样
@PrasathV 已修复，改为在之后进行。
谢谢，但还有一个疑问.. 我使用 unicode 041 作为位置，但它显示 alpahbet？
@PrasathV 您是否将字体系列设置为 font-awesome ？
是的.. 显示一些字母“A”

【解决方案2】：

要放置带有position: absolute 的元素，通常我们需要在父元素上添加position: relative。来自Documentation：

绝对定位元素相对于最近定位的祖先（非静态）定位。如果定位的祖先不存在，则使用初始容器。

我建议你使用修改后的HTML，如下所示：

<div class="input-holder">
  <input type="text" class="search_location" value="Choose Location">
  <i class="fa fa-map-marker icon"></i>
</div>

在 css 中进行了以下一些更改：

* {box-sizing: border-box;}

.input-holder {
  position: relative;
  width: 300px;
}

.search_location {
  display: block;
  width: 100%;
}

* {box-sizing: border-box;}
.input-holder {
  position: relative;
  width: 300px;
}
.search_location {
    padding: 9px 10px 8px 10px;
    background: #fff;
    display: block;
    color: #777;
    width: 100%;
}
.icon { 
  position: absolute;
  right: 10px;
  top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-holder">
  <input type="text" class="search_location" value="Choose Location">
  <i class="fa fa-map-marker icon"></i>
</div>

【讨论】：