在占位符中使用Font Awesome图标 [英] Use Font Awesome Icon in Placeholder

问题描述

是否可以在占位符中使用真棒字体"图标?我读到了在占位符不允许HTML的地方.有解决方法吗?

Is it possible to use Font Awesome Icon in a Placeholder? I read where HTML isn't allowed in a placeholder. Is there a workaround?

placeholder="<i class='icon-search'></i>"

推荐答案

您不能添加图标和文本，因为您不能对占位符的一部分应用其他字体，但是，如果您对仅占位符感到满意图标，那么它可以正常工作. FontAwesome图标只是带有自定义字体的字符(您可以在 FontAwesome速查表中查找转义的Unicode字符content规则.在较少的源代码中，它可以在变量中找到. less 的挑战是在输入不为空时交换字体，将其与jQuery结合使用，例如此.

You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome Cheatsheet for the escaped Unicode character in the content rule. In the less source code it's found in variables.less The challenge would be to swap the fonts when the input is not empty. Combine it with jQuery like this.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

使用此CSS:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

这个(简单的)jQuery

And this (simple) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

但是，字体之间的过渡将不平滑.

The transition between fonts will not be smooth, however.

这篇关于在占位符中使用Font Awesome图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！