Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to place Font Awesome icon to input field ?

  • Last Updated : 30 Jul, 2021

Place Font Awesome icon in your form is an innovative idea, that will bring attention to your website. It is as simple as putting Font Awesome icon on any button. The <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages, it needs the font-awesome link inside the head section. The font-awesome icon can be placed by using the fa prefix before the icon’s name.

Fontawesome link:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Example: In this example, we will take a form where the input field is necessary. After that, we will place the font-awesome icon inside the input field. We will use the CDN link to use the font-awesome icons. After the input field, we will place our icon. Then with the help of CSS position property, we will place the icon over the input field.



Below is the implementation of the above approach:




<!DOCTYPE html> 
<html
  
<head>
    <link rel="stylesheet" href
      
    <style
      
        /* Assign full width inputs*/ 
        input[type=text], 
        input[type=password] { 
            width: 100%; 
            padding: 12px 40px; 
            margin: 8px 0; 
            display: inline-block; 
            border: 1px solid #ccc; 
            box-sizing: border-box; 
        
          
        /* Set a style for the buttons*/ 
        button { 
            background-color: #4CAF50; 
            color: white; 
            padding: 14px 20px; 
            margin: 8px 0; 
            border: none; 
            cursor: pointer; 
            width: 100%; 
        
  
        /* Set a hover effect for the button*/ 
        button:hover { 
            opacity: 0.8; 
        
  
        /* Set extra style for the cancel button*/ 
        .container { 
            padding: 16px; 
        
      
        .fontuser {
            position: relative;
        }
          
        .fontuser i{
            position: absolute;
            left: 15px;
            top: 40px;
            color: gray;
        }
          
        .fontpassword {
            position: relative;
        }
          
        .fontpassword i{
            position: absolute;
            left: 15px;
            top: 40px;
            color: gray;
        }
    </style
</head>
  
<body
    <div class="container"
        <div class="fontuser">
            <label><b>Username</b></label
            <input type="text" 
                    placeholder="Enter Username"
                    name="uname" required> 
            <i class="fa fa-user fa-lg"></i>
        </div>
          
        <div class="fontpassword">
            <label><b>Password</b></label
            <input type="password"
                    placeholder="Enter Password"
                    name="psw" required> 
            <i class="fa fa-key fa-lg"></i>
        </div>     
          
        <button type="submit">Login</button
        <input type="checkbox" checked="checked">
                Remember me 
    </div
</body
  
</html>

Output:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :