Question

以下是输入标记和图标的代码：

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

Answer 1

尝试将输入和图标包装到像这样的父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;
}

Answer 2

占位符字体很棒的代码

<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='&#xf02b; 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;
}

Answer 3

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

Answer 4

试试此链接。它可能会帮助你。

Html代码

<input type="email" placeholder="&#61447; 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;
}

链接 - Click here

Answer 5

我认为rachmatsasongko的答案几乎是完美的。唯一的问题是文本将在图标后面运行，但你可以用一块额外的CSS来解决这个问题

我做了一个小问题 JSFIDDLE

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在输入标签中设置字体真棒图标

CSS

5 个答案: