文本输入元素中的字体超赞图标

小开

最佳答案

你说得对。: 之前和: 之后的伪内容不打算对替换后的内容如 img和 input元素进行处理。添加一个包装元素并声明一个 font-family 是可能性之一，就像使用背景图像一样。或者可能是一个符合您需要的 html 5占位符文本:

<input name="username" placeholder="&#61447;">

不支持占位符属性的浏览器只会忽略它。

更新

之前的内容选择器选择输入: input[type="text"]:before。您应该选择包装: .wrapper:before。参见 http://jsfiddle.net/allcaps/gA4rx/。我还在包装器是多余的地方添加了占位符建议。

.wrapper input[type="text"] {
position: relative;
}
    

input { font-family: 'FontAwesome'; } /* This is for the placeholder */
    

.wrapper:before {
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
}


<p class="wrapper"><input placeholder="&#61447; Username"></p>

撤退

Font Awesome 使用 Unicode 私有使用区域(PUA)来存储图标。其他字符不存在，返回到浏览器默认值。这应该与任何其他输入相同。如果您在输入元素上定义了一种字体，那么在使用图标的情况下提供与后备字体相同的字体。像这样:

input { font-family: 'FontAwesome', YourFont; }

小开

为了使用 unicode 或 fontawest，您应该添加一个 span和 class，如下所示:

HTML:

<span class="button1 search"></span>
<input name="username">

在 CSS 中:

.button1 {
background-color: #B9D5AD;
border-radius: 0.2em 0 0 0.2em;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
margin:1px 12px;
border-radius: 0.2em;
color: #333333;
cursor: pointer;
position: absolute;
padding: 3px;
text-decoration: none;
}

小开

在阅读了这个问题的各种版本并四处搜索之后，我想出了一个相当干净、没有 js 的解决方案。它类似于@allcap 解决方案，但避免了输入字体从主文档字体改变的问题。

使用 ::input-placeholder属性专门设计占位符文本的样式。这允许您使用您的图标字体作为占位符字体，并使用您的主体(或其他字体)作为实际的输入文本。目前，您需要指定特定于供应商的选择器。

只要输入元素中不需要图标和文本的组合，这种方法就可以很好地工作。如果你这样做，那么你将需要忍受占位符文本是默认的浏览器字体(我的纯衬线)的单词。

例如。
超文本标示语言

<p class="wrapper">
<input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
font-family:'FontAwesome';
}

摆弄浏览器前缀选择器: http://jsfiddle.net/gA4rx/78/

请注意，您需要将每个特定于浏览器的选择器定义为一个单独的规则。如果将它们组合在一起，浏览器将忽略它。

小开

<!doctype html>
<html>
<head>
## Heading ##
<meta charset="utf-8">
<title>
Untitled Document
</title>
</head>
<style>
li {
display: block;
width: auto;
}
ul li> ul li {
float: left;
}
ul li> ul {
display: none;
position: absolute;
}
li:hover > ul {
display: block;
margin-left: 148px;
display: inline;
margin-top: -52px;
}
a {
background: #f2f2ea;
display: block;
/*padding:10px 5px;
*/
width: 186px;
height: 50px;
border: solid 2px #c2c2c2;
border-bottom: none;
text-decoration: none;
}
li:hover >a {
background: #ffffff;
}
ul li>li:hover {
margin: 12px auto 0px auto;
padding-top: 10px;
width: 0;
height: 0;
border-top: 8px solid #c2c2c2;
}
.bottom {
border-bottom: solid 2px #c2c2c2;
}
.sub_m {
border-bottom: solid 2px #c2c2c2;
}
.sub_m2 {
border-left: none;
border-right: none;
border-bottom: solid 2px #c2c2c2;
}
li.selected {
background: #6D0070;
}
#menu_content {
/*float:left;
*/


}
.ca-main {
padding-top: 18px;
margin: 0;
color: #34495e;
font-size: 18px;
}
.ca-sub {
padding-top: 18px;
margin: 0px 20px;
color: #34495e;
font-size: 18px;
}
.submenu a {
width: auto;
}
h2 {
text-align: center;
}
</style>
<body>
<ul>
<li>
<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 1
</h2>
</div>
</a>
<ul class="submenu" >
<li>
<a href="#" class="sub_m">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_1
</h2>
</div>
</a>
</li>
<li>


<a href="#" class="sub_m2">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_2
</h2>
</div>
</a>
</li>
<li >


<a href="#" class="sub_m">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_3
</h2>
</div>
</a>


</li>
</ul>
</li>
<li>


<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 2
</h2>
</div>
</a>
</li>
<li>


<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 3
</h2>
</div>
</a>


</li>
<li>


<a href="#"  class="bottom">
<div id="menu_content">
<h2 class="ca-main">
Item 4
</h2>
</div>
</a>


</li>
</ul>
</body>
</html>

小开

您可以使用包装器。在包装器内部，添加字体可怕的元素 i和 input元素。

<div class="wrapper">
<i class="fa fa-icon"></i>
<input type="button">
</div>

然后将包装器的位置设置为相对:

.wrapper { position: relative; }

然后将 i元素的位置设置为绝对值，并为其设置正确的位置:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(我知道这是黑客行为，但它能完成任务。)

小开

产出:

enter image description here

HTML:

<input name="txtName" id="txtName">


<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
.errspan {
float: right;
margin-right: 6px;
margin-top: -20px;
position: relative;
z-index: 2;
color: red;
}
</style>

(或)

产出:

HTML:

<div class="input-wrapper">
<input type="text" />
</div>

CSS:

<style type="text/css">
.input-wrapper {
display:inline-block;
position: relative
}
.input-wrapper:after {
font-family: 'FontAwesome';
content: '\f274';
position: absolute;
right: 6px;
}
</style>

小开

基于全大写的建议。下面是字体-可怕的背景方法与最少量的 HTML:

<div class="wrapper"><input></div>


.wrapper {
position: relative;
}


input { padding-left: 20px; }


.wrapper:before {
font-family: 'FontAwesome';
position: absolute;
top: 2px;
left: 3px;
content: "\f007";
}

小开

我就是这样做到的

  form i {
left: -25px;
top: 23px;
border: none;
position: relative;
padding: 0;
margin: 0;
float: left;
color: #29a038;
}

<form>


<i class="fa fa-link"></i>


<div class="form-group string optional profile_website">
<input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
</div>


<i class="fa fa-facebook"></i>
<div class="form-group url optional profile_facebook_url">
<input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
</div>


<i class="fa fa-twitter"></i>
<div class="form-group url optional profile_twitter_url">
<input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
</div>


<i class="fa fa-instagram"></i>
<div class="form-group url optional profile_instagram_url">
<input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
</div>


<input type="submit" name="commit" value="Add profile">
</form>

结果是这样的:

边注

请注意，我正在使用 RubyonRails，所以我得到的代码看起来有点夸张。Slim 中的视图代码实际上非常简洁:

i.fa.fa-link
= f.input :website, label: false


i.fa.fa-facebook
= f.input :facebook_url, label: false


i.fa.fa-twitter
= f.input :twitter_url, label: false


i.fa.fa-instagram
= f.input :instagram_url, label: false

小开

我尝试了下面的东西，它真的很好超文本标示语言

input.hai {
width: 450px;
padding-left: 25px;
margin: 15px;
height: 25px;
background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
background-color: grey;
}

<div >


<input class="hai" placeholder="Search term">


</div>

小开

在文本输入元素中设置可点击的图标。

CSS

.myClass {
font-size:20px;
position:absolute; top:10px; left:10px;
}

超文本标示语言

<div>
<label style="position:relative;">
<i class="myClass fa fa-address-book-o"></i>
<input class="w3-input" type="text" style="padding-left:40px;">
</label>
</div>

只需在 <i>标签中添加任何你喜欢的图标，就可以从 Font Awesome 库中获得喜欢的结果。

小开

如果你需要满足以下条件(当前的答案都不符合这些条件) ，这个答案将对你有用:

图标是 在里面文本框
图标不应该消失时，文本输入到输入，文本输入到右边的图标
单击图标应该可以使基础输入成为焦点

我相信3是满足以下条件的最小 HTML 元素数量:

.input-icon{
position: absolute;
left: 3px;
top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
padding-left: 17px;
}
.input-wrapper{
position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
<input id="stuff">
<label for="stuff" class="fa fa-user input-icon"></label>
</div>

小开

不需要编写很多代码... 只需按照以下步骤:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

你可以在这里找到指向 Unicode (太棒了)的链接..。

用于图标的 FontAwesome Unicode

小开

我找到了使用引导程序4的最简单的方法。

<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span></div>
<input type="text"/>
</div>

小开

<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>


<body>


<div class="inp1">
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>

小开

::-webkit-search-cancel-button {
height: 10px;
width: 10px;
display: inline-block;
/*background-color: #0e1d3033;*/
content: "&#f00d;";
font-family: FontAwesome;
font-weight: 900;
-webkit-appearance: searchfield-cancel-button !important;
}
input#searchInput {
-webkit-appearance: searchfield !important;
}


<input data-type="search" type="search" id="searchInput" class="form-control">

小开

对我来说，有一个简单的方法，有一个图标“在”一个文本输入，而不必尝试使用伪元素与字体可怕的 Unicode 等，是有文本输入和图标在一个包装器元素，我们将位置相对，然后位置都搜索输入和字体可怕的图标绝对。

就像我们处理背景图片和文本一样，我们在这里做。我觉得这对初学者来说也很好，因为 CSS 定位是初学者在编码之初就应该学习的东西，所以代码很容易理解和重用。

    <div class="searchbar-wrapper">
<i class="fa fa-search searchbar-i" aria-hidden="true"></i>
<input class="searchbar-input" type="search" placeholder="Search...">
</div>


.searchbar-wrapper{
position:relative;
}


.searchbar-i{
position:absolute;
top: 50%;
transform: translateY(-50%);
padding: 0 .5rem;
}


.searchbar-input{
padding-left: 2rem;
}

小开

.input-icon{
position: absolute;
left: 3px;
top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
padding-left: 17px;
}
.input-wrapper{
position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
<input id="stuff">
<label for="stuff" class="fa fa-user input-icon"></label>
</div>

小开

纯 CSS

input[type=search] {
min-width: 320px;
height: 24px;
border: 1px solid #E6E6E6;
border-radius: 8px;
margin-top: 6px;
background-image: url('/img/search.png');
background-size: 16px;
background-position: 280px;
background-repeat: no-repeat;
}

小开

我的解决方案 是在 input周围设置一个相对容器来保存图标。那个外部容器有一个带有所需图标的 ::after，位于容器内的 absolute。

HTML:

<div class="button__outer">
<input type="submit" class="button" value="Send"/>
</div>

SASS 密码:

.button {
display: inline-block;
width: auto;
height: 60px;
line-height: 60px;
}


.button__outer {
position: relative;
display: inline-block;
width: auto;


&::after {
position: absolute;
right: 0;
top: 0;
height: 60px;
line-height: 60px;
width: 60px;
font-family: 'FontAwesome', sans-serif;
content: "\f054";
color: #fff;
font-size: 27px;
font-weight: 700;
}
}

小开

我的解决方案是在输入元素中添加一个字体很棒的图标。下面是在 input 元素中添加图标的简单代码。只要复制下面的代码，并把你想要添加的地方。或者，如果你想改变图标，然后只是把你的图标代码在 <i>标签。

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 50%;
margin-bottom: 15px;
}


.icon {
padding: 10px;
background: linear-gradient(to right, #ec008c, #fc6767);
color: white;
min-width: 20px;
text-align: center;
}
.soft-field {
width: 100%;
padding: 10px;
outline: none;
border:2px solid #fc6767;
}
.soft-field:focus {
border: 2px solid #ec008c;
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="soft-codeon">
<i class="fa fa-user icon"></i>
<input class="soft-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="soft-codeon">
<i class="fa fa-envelope icon"></i>
<input class="soft-field" type="text" placeholder="Email" name="email">
</div>

小开

有时图标不会显示，由于字体酷版本。对于版本5，CSS 应该

.dropdown-wrapper::after {
content: "\f078";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #000;
position: absolute;
right: 6px;
top: 10px;
z-index: 1;
width: 10%;
height: 100%;
pointer-events: none;
}

小开

很简单，但你需要自力更生

 <div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
</div>
<input type="email" id="senha_nova" placeholder="Email">
</div><!-- input-group -->

小开

下面这个简单的解决方案对我很有效。

<input type="text" class="fa" placeholder="&#xf002; Search">

使用此筛选器实现搜索: https://www.npmjs.com/package/ng2-search-filter

小开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<style>
.input {
border: 1px solid black;
width: 250px;
padding: 10px;
border-radius: 9999px;
}
.message-input {
border: 0;
outline: 0;
margin-left: 20px;
}
</style>
<body>
<div class="input">
<i class="fas fa-envelope"></i>
<input class="message-input" type="text" placeholder="Message">
</div>
</body>
</html>

小开

你可以使用 Bootstrap 5。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container shadow min-vh-100 py-2">
<div class="position-relative">
<input type="text" class="form-control ">
<a href=""><i class="position-absolute top-50 end-0 translate-middle-y pe-2">❌</i></a>
</div>
</div>