To add icon inside the input element the <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages or in some specific area, it needs the fontawesome link inside the head tag. The fontawesome icon can be placed by using the fa prefix before the icon’s name.
fontawesome link: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Note: No downloading or installation is required.
- How to put the text inside of a created icon?
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- How to put a responsive clear button inside HTML input text field ?
- How to enable/disable all input controls inside a form element using jQuery ?
- How to put an input element on the same line as its label?
- How to place Font Awesome icon to input field ?
- How to style icon color, size, and shadow by using CSS ?
- How to Create an Image Overlay Icon using HTML and CSS ?
- Design a form component which takes input from its user and displays a form
- How to count number of notification on an icon?
- Bootstrap | Close Icon for dismissing content with Examples
- How to add icon logo in title bar using HTML ?
- How to display icon next to show/hide text on button?
- How to translate an image or icon by hovering over it?
- How to hide “Image not found” icon when source image is not found?
- How to use mat-icon in angular?
- How to use font awesome icon as a cursor ?
- How to remove the default arrow icon from a dropdown list?
- How to convert the hamburger icon of navigation menu to X on click ?
- Reduce the size of an icon during the animation
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.