在html窗体中的字体棒图标 [英] Font awesome icons in html form

问题描述

我想在html表单中包含字体超棒的图标（如用户名和密码文本框）。如果我以占位符的形式提供它，只要点击文本框就会消失。我想要这样：当我单击文本框时，占位符（例如：用户名作为文本）应该消失，而当我单击文本框时，字体真棒图标（例如：用户图标）不应该消失。什么应该

解决方案

code>< p class =wrapper>< input placeholder =&＃61447; Username>< / p>

CSS：

  .wrapper input [type =text] {
 position：relative; 
} 
 
 input {font-family：'FontAwesome'; } / *这是占位符* / 
 
 .wrapper：之前{
 font-family：'FontAwesome'; 
颜色：红色; 
位置：绝对; 
 top：0px; 
 left：-5px; 
内容：\f007; 
} 
  

http://jsfiddle.net/jagmitg/0osgcoue/

---

编辑：下面是一个替代方案（不在输入内，但它会保证它不会消失。）

 < label id =email-label2> 
< i class =fa fa-rocket>< / i> 
< input type =textid =email2placeholder =email here/> 
< / label> 
  

CSS ：

 ＃email-label2 {
 position：relative; 
} 
 
＃email-label2 .fa-rocket {
 color：＃666; 
 top：2px; 
 left：5px; 
位置：绝对; 
} 
 
＃email2 {
 padding-left：20px; 
} 
  

http://jsfiddle.net/jagmitg/xs459ab2/

你需要妥协一些东西！

I'd like to include font awesome icons in a html form(Like username and password text box).If I give it as a placeholder,it disappears as soon as I click the text box.I'd like to have it this way:The placeholder(Eg:"Username" as a text) should vanish as soon as I click the text box while the font awesome icon(Eg:User icon) shouldn't vanish when I click the text box.What should I do ?

解决方案

Try this:

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

CSS:

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

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

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

http://jsfiddle.net/jagmitg/0osgcoue/

---

EDIT: Here is an alternative (not within the input but it will so it will not go away.)

<label id="email-label2">
    <i class="fa fa-rocket"></i>
    <input type="text"id="email2" placeholder="email here" />
</label>

CSS:

#email-label2 {
    position: relative;
}

#email-label2 .fa-rocket {
    color: #666;
    top: 2px;
    left: 5px;
    position: absolute;
}

#email2 {
    padding-left: 20px;
}

http://jsfiddle.net/jagmitg/xs459ab2/

You need to compromise on something!

这篇关于在html窗体中的字体棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！