我正在尝试将图标附加到输入。
使用 font awesome 可以将该图标附加到输入的值上,如下所示:
<input class="btn" type="submit" value="">
哪里value=""
相当于<i class="fa fa-sign-in"></i>
,到目前为止这是完美的,但我需要那个图标更大,我怎样才能做到这一点?或者将该图标附加到输入的另一种方法是什么?
和CSS
input[type="submit"] {
font-family: FontAwesome;
}
并且图标必须附在左边。
最佳答案
我会使用 <button type="submit"></button>
@font-face {
font-family: FontAwasome;
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.woff");
}
.sign-in:after {
content: '';
display: inline-block;
font-family: FontAwasome;
font-size: 2em;
line-height: 2.75rem;
height: 2.75rem;
vertical-align: top;
}
button {
background-color: blue;
border: none;
color: white;
min-height: 2.75em;
margin: 0;
padding: 0 1em;
}
<button type="submit" class="sign-in"></button>
关于css - 如何将图标附加到输入搜索?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28637770/