How To Use Font Awesome Icon In Placeholder

The Placeholder attribute specifies a short hint that describes the expected value of an input field or text area. Before the user enters a value, the short hint is displayed in the field.

Font Awesome is a toolkit for icons and fonts, based on CSS and LESS.

 

In this article, we will learn how to use Font Awesome icon in placeholder.

Let’s start,

Add the following CSS to use the Font Awesome icons:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

NOTE: To use Font Awesome 5 icons sign up for an account at Font Awesome, and get a code. Once you get the code you can start using Font Awesome, by including only one line to your webpage.

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Here, in the example, we are using Font Awesome 4.

You can place Font Awesome icons by using the prefix &#x and the icon’s Unicode.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <input style="font-family: FontAwesome;" placeholder='&#xf002 Search...' />
</body>
</html>

NOTE:  With Font Awesome 4 you must have to apply style=”font-family: FontAwesome;”  and With Font Awesome 5 you must have to apply style=”font-family: ‘Font Awesome 5 Brands’;”.

Output:

 

Now, the question is how we can find the icon’s Unicode?

Follow the steps given below to get the icon’s Unicode.

Firstly, go to the Font Awesome’s icon list then click the icon you want to use.

Font Awesome 4 Icons | Font Awesome 5 Icons

 

Then you can see Unicode: on the redirected page.

 

Also, check How To Prevent Copy Content Using JavaScript

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories