如何在输入标签中设置字体真棒图标
[英]how to set font awesome icon in input tag
问题描述
这是输入标签和图标的代码：
<input type="email" placeholder="Username" id="tutu" required />
CSS
#tutu{
border-radius: 3px;
border: 1px silver solid;
padding-left: 10px;
font-weight: bolder;
color: #bcbcbc;
height: 40px;
width: 350px;
}
5 个解决方案
解决方案1
1 已采纳 2017-01-11 06:00:10
尝试将输入和图标包装到这样的父 div 中
<div class="tutuclass">
<input type="email" placeholder="Username" id="tutu" required />
<i class="fa fa-user"></i>
</div>
然后更改css如下
.tutuclass #tutu{
border-radius: 3px;
border: 1px silver solid;
padding-left: 10px;
font-weight: bolder;
color: #bcbcbc;
height: 40px;
width: 350px;
}
.tutuclass .fa {
margin: auto -30px;
}
解决方案2
0 2017-01-11 06:02:02
占位符中 Font-awesome 图标的代码
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<input type='text' placeholder=' Type any Text'></input>
</body>
</html>
css代码
input {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
解决方案3
0 2017-01-11 06:02:39
<div class="login-controls">
<label>
<i class="fa fa-user"></i>
</label>
<input type="text" placeholder="Username" />
</div>
对于 CSS
.login-controls{
margin: 10px 0;
border-bottom: 1px solid #000000;
padding: 10px 5px;
}
.login-controls>label{
width: 10%;
min-width: 50px;
}
.login-controls>input{
width: 90%;
background: transparent;
border: none;
outline: none;
padding: 5px 10px;
}
解决方案4
0 2017-01-11 06:05:37
试试这个链接。 它可能会帮助你需要。
html代码
<input type="email" placeholder=" Username" id="tutu" required/>
CSS 代码
.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: -10px;
content: "\f007";
}
/* This is for the Textbox */
#tutu {
border-radius: 3px;
border: 1px silver solid;
padding-left: 10px;
font-weight: bolder;
color: #bcbcbc;
height: 40px;
width: 350px;
}
链接 -点击这里
解决方案5
0 2018-02-24 14:24:17
我认为 rachmatsasongko 的回答几乎是完美的。 唯一的问题是文本将在图标后面运行，但您可以使用额外的 css 来解决此问题
我做了一个快速小提琴JSFIDDLE
.tutuclass #tutu{ border-radius: 3px; border: 1px silver solid; padding-left: 10px; font-weight: bolder; color: #bcbcbc; height: 40px; width: 350px; } .tutuclass .fa { margin: auto -30px; color: #fff; } input[type="email"] { background: #000; padding-right: 50px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="tutuclass"> <input type="email" placeholder="Username" id="tutu" required /> <i class="fa fa-user"></i> </div>
如何使用纯 css 将 Font Awesome 图标放在输入标签中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.