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

Question

我想在占位符中使用图标

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

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

Answer 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 更改为使用 Icons字体由CSS.

给出

Answer 2

尝试将 CSS ::placeholder 伪元素与 background-image 属性

一起使用

如果 HTML 占位符属性至少包含 space

::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=" ">

Answer 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'" />

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

How to use open-iconic-bootstrap in placeholder of a input

html

css

icons