0

I am trying to put Bootstrap search icon in the placeholder of <input>. However as it is obvious that I cannot just write <input type="text" placeholder="<i class='bi bi-search'>" in the placeholder. I checked Stackoverflow and found that for fontawesome we can just simply put

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" /> (For version 4.7+).

However What I want to know is there someway of achieving this with bootstrap also. I checked the bootstrap-icon CSS file and found out this .bi-search::before { content: "\f52a"; }. Edit:- I want to place it in the Placeholder not in the <input> field Hope I made the question Clear.

a_man
  • 194
  • 1
  • 11
  • 1
    override the bootstrap style in your css file – לבני מלכה Aug 04 '21 at 06:48
  • @לבנימלכה Can you please tell me how?? – a_man Aug 04 '21 at 06:51
  • @Mrupsidown, not exactly, having the icon fixed in the input field is different and having it in placeholder is different. – a_man Aug 04 '21 at 08:28
  • @Mrupsidown The answers you're referring to for possible duplicates are based on **Fontawesome** and I already mentioned that in the question how it can be done using fontawesome fonts, the question is about bootstrap icons. – a_man Aug 04 '21 at 08:40
  • 1
    @a_man If you know how to do it with FontAwesome, you can basically do it with Bootstrap Icons too. Its just another font-family (font-family:Arial, bootstrap-icons) – Gert B. Aug 04 '21 at 09:47
  • @GertB. I tried doing the same but I guess bootstrap icons do not have ''" this, I mean it's not working at all. – a_man Aug 04 '21 at 10:27
  • 1
    add the i element for the icon you want to use, inspect it look for the content property in css, there you will find the correct code – Gert B. Aug 04 '21 at 11:13
  • @GertB. doesn't seem to work. Also I really can't understand why i am getting referred to the answer which is not even close to what I am asking. I wanted to put bootstrap icon in **PLACEHOLDER** of the not in the input field itself. – a_man Aug 04 '21 at 15:48
  • 1
    Try this, ```` – pyrogrammer Aug 05 '21 at 02:46
  • 1
    @pyrogrammer man, that's exactly what I was looking for. Thanks a ton ^_^ – a_man Aug 05 '21 at 02:50

0 Answers0