1

https://useiconic.com/open

I want to use a icon in placeholder

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

In bootstrap icon I can use &#xf002 But in this icon I can not find the icon code.

user666
  • 329
  • 1
  • 7
  • 22
  • 1
    Check this https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder – mk23 Jun 23 '21 at 03:55

2 Answers2

3

You can get the code of the icon by checking the .css file of the font. If the icon you're are searching for is written like this

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

Then the unicode in HTML will be written like this &#xe02f.

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

In this example I used the CDN of Open Iconic (https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css) and changed the font-family of the placeholder of the input to use the Icons font given by the CSS.

mwryl
  • 664
  • 7
  • 16
  • how to change the position of the icon it is not center with the placeholder text – user666 Jun 30 '21 at 00:48
  • This depends on the font mainly. I updated my CodePen with another font (FontAwesome) to show you that. If you really want to style the icon you should use SVg directly (like in @swhite solution below). – mwryl Jun 30 '21 at 04:07
0

<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'" />
TinsG
  • 163
  • 2
  • 14