可以在占位符中使用字体令人敬畏的图标吗?我读到占位符中不允许使用HTML。有解决办法吗?
placeholder="<i class='icon-search'></i>"
发布于 2013-10-14 05:12:42
你不能添加图标和文本,因为你不能对占位符的一部分应用不同的字体,但是,如果你只对一个图标感到满意,那么它就可以工作。FontAwesome图标只是具有自定义字体的字符(您可以在content
规则中查看转义的Unicode字符的FontAwesome Cheatsheet。在variables.less中发现的源代码较少的情况下,面临的挑战是在输入不为空时交换字体。将其与this等jQuery结合使用。
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</div>
</form>
使用此CSS:
input.empty {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
这个(简单的) jQuery
$('#iconified').on('keyup', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
然而,字体之间的转换将不会很顺利。
发布于 2014-06-17 12:17:51
如果你使用的是FontAwesome 4.7
,这应该足够了:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" placeholder=" Search" style="font-family:Arial, FontAwesome" />
十六进制代码的列表可以在Font Awesome cheatsheet中找到。然而,在最新的CSS5.0中,这种方法不起作用(即使您结合使用FontAwesome方法和更新的font-family
)。
发布于 2019-04-08 23:07:38
@Elli的答案可以在FontAwesome 5中使用,但它需要使用正确的字体名称并使用您想要的版本的特定CSS。例如,当使用FA5免费时,如果我包括all.css,我就不能让它工作,但如果我包括solid.css,它就可以正常工作:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">
<input type="text" placeholder=" Search" style="font-family: Arial, 'Font Awesome 5 Free'" />
对于FA5专业版,字体名称是‘FontAwese5Pro’。
https://stackoverflow.com/questions/19350291
复制相似问题