CODEWITHSUNDEEP
cssfont-awesome
Hide
Hide

Reputation: 3317

Font Awesome5 with input placeholder

I want to add FontAwesome icon to input placeholder.

So I tried to write code like this.

[html]

<input type="text" placeholder="&#xF167;"/>

[css]

font-family:'Font Awesome 5 Brands' !important

It works fine. Youtube icon is in the input tag.

enter image description here

But When I add search icon(placeholder="&#xF002;") into the placeholder, It doesn't work properly.

enter image description here

What is the problem of my code?

Font awesome cheatsheet is here -> https://fontawesome.com/cheatsheet

Thanks.

Upvotes: 7

Views: 5770

Answers (3)

John
John

Reputation: 1

You can load all the fontawesome libraries with:

href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384- 
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
crossorigin="anonymous">```

Upvotes: 0

mwilkerson
mwilkerson

Reputation: 1424

Set the font-family as below, but also set the font-weight according to which style you want to load. For Solid, the font-weight would be 900.

input {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

Here's a working CodePen to demonstrate.

This does require that you're properly loading Font Awesome 5, and it will only work in the Webfonts with CSS method. In the CodePen example, only Font Awesome Free Solid is being loaded.

Here's a reference showing the font weights associated with each Font Awesome style.

Upvotes: 9

ngearing
ngearing

Reputation: 1365

Font Awesome 5 splits the icons into different families.

There's Solid, Brands and Regular. The search icon is a Solid or Regular style font. So you need to use font-family: Font Awesome 5 Free;

Upvotes: 0

Related Questions