在占位符中使用字体强大的图标
在占位符中使用字体强大的图标
提问于 2013-10-14 05:06:57
可以在占位符中使用字体令人敬畏的图标吗？我读到占位符中不允许使用HTML。有解决办法吗？
placeholder="<i class='icon-search'></i>"回答 14
Stack Overflow用户
回答已采纳
发布于 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');
}
});然而，字体之间的转换将不会很顺利。
Stack Overflow用户
发布于 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)。
Stack Overflow用户
发布于 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’。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19350291
复制相关文章
相似问题