如何在输入的占位符中使用 open-iconic-bootstrap

Posted 2023-03-05

【中文标题】如何在输入的占位符中使用 open-iconic-bootstrap

【英文标题】：How to use open-iconic-bootstrap in placeholder of a input

【发布时间】：2021-08-24 06:13:38

【问题描述】：

https://useiconic.com/open

我想在占位符中使用图标

<input type="text" placeholder="xxx" />

在引导图标中我可以使用&#xf002 但在这个图标中我找不到图标代码。

【问题讨论】：

查看***.com/questions/19350291/…

【参考方案1】：

您可以通过查看字体的.css文件来获取图标的代码。 如果你要搜索的图标是这样写的

.oi[data-glyph=caret-right]:before  content:'\e02f'; 

那么html中的unicode会这样写&#xe02f。

https://codepen.io/mlarabi/pen/QWpXNBR

在此示例中，我使用了 Open Iconic (https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css) 的 CDN，并将 input 的 placeholder 的 font-family 更改为使用 CSS 给出的 Icons 字体。

【讨论】：

如何用占位符文字改变不居中的图标位置

这主要取决于字体。我用另一种字体 (FontAwesome) 更新了我的 CodePen 以向您展示这一点。如果你真的想设置图标的样式，你应该直接使用 SVG（就像下面的 @swhite 解决方案一样）。

【参考方案2】：

尝试使用带有 background-image 属性的 CSS ::placeholder 伪元素

如果 HTML 占位符属性至少包含一个空格，则此方法有效

::placeholder 
  background-image: url(https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/svg/magnifying-glass.svg);
  background-repeat: no-repeat;
  background-size: contain;



/*change the url to your projects path to svg files*/

<input type="text" placeholder=" ">

【参考方案3】：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />