在占位符中使用Font Awesome图标

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以在占位符中使用Font Awesome Icon？我读到了占位符不允许HTML的地方。有解决方法吗？

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

回答：

您无法添加图标和文本，因为您无法将其他字体应用于占位符的一部分，但是，如果您对仅图标感到满意，那么它就可以工作。FontAwesome图标只是带有自定义字体的字符（您可以在规则中查看FontAwesome备忘单中转义的Unicode字符content。在较少的源代码中，可以在[变量中找到它。less的挑战是，当输入为不是空的。。

<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

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

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

以上是 在占位符中使用Font Awesome图标 的全部内容， 来源链接： utcz.com/qa/413826.html

回到顶部