How to Add Icon in Form Input Field in Tailwind CSS ?
Last Updated :
17 Oct, 2024
An icon in a form input field is a small picture or symbol placed inside or next to the input box. It helps users understand what to enter and makes the form easier to use. Using Tailwind CSS, you can use a combination of HTML structure and Tailwind utility classes to add icons in the form input field.
In this method, input elements are enhanced with Tailwind CSS using inline SVG icons. Since SVG (Scalable Vector Graphics) icons are easily customizable, scaleable, and styleable using CSS, they are a flexible option for icons. By directly integrating the SVG code into the HTML, we can use Tailwind CSS classes to modify the SVG's look and behavior.
Syntax
<svg class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor">
<!-- Your SVG icon code here -->
</svg>
Example: This example uses the SVG icons with the Form Input.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet" />
<title>
Tailwind CSS Icon in Input
</title>
</head>
<body class="bg-gray-100
min-h-screen
flex items-center
justify-center">
<div class="relative">
<input type="text"
class="pl-10 pr-4 py-2 border rounded-lg"
placeholder="Enter your email" />
<div class="absolute inset-y-0 left-0 pl-3
flex items-center
pointer-events-none">
<svg class="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor">
<path stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8">
</path>
</svg>
</div>
</div>
</body>
</html>
Output:
In this method, we make use of icon font libraries, in particular the Font Awesome library, to include icons into input elements using Tailwind CSS. Collections of symbols or glyphs that are used as font characters are known as icon fonts. Including the Font Awesome CSS gives us access to a large number of insertable icons.
Syntax
<i class="fas fa-envelope text-gray-400"></i>
Example: This example uses the Font-awesome icons with the Form Input.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet" />
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet" />
<title>
Tailwind CSS Icon in Input
</title>
</head>
<body class="bg-gray-100
min-h-screen
flex items-center
justify-center">
<div class="relative">
<input type="text"
class="pl-10 pr-4 py-2 border rounded-lg"
placeholder="Enter your email" />
<div class="absolute inset-y-0 left-0 pl-3
flex items-center
pointer-events-none">
<i class="fas fa-envelope text-gray-400"></i>
</div>
</div>
</body>
</html>
Output:
Similar Reads
CSS to put icon inside an input element in a form CSS to put an icon inside an input element in a form asks how to style an input field to include an icon within the input box itself. This typically involves using CSS to position the icon alongside the text, providing a visually integrated user interface. CDN LinkInclude the Font Awesome library to
2 min read
CSS to put icon inside an input element in a form CSS to put an icon inside an input element in a form asks how to style an input field to include an icon within the input box itself. This typically involves using CSS to position the icon alongside the text, providing a visually integrated user interface. CDN LinkInclude the Font Awesome library to
2 min read
How to Add New Colors in Tailwind CSS ? Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-designed styles and classes to simplify the process of styling web applications. However, the default set of colors provided by Tailwind may not always meet the requirements of your project. In such cases, you may
4 min read
How to Place Font Awesome Icon to Input Field? 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-
2 min read
How To Add Custom Box Shadow In Tailwind CSS? Tailwind CSS is a utility-focused CSS framework. Offers a wide range of design utilities. It does include predefined shading, however, for unique design needs, you might want a custom box shadow that goes beyond the default. in this article, you will learn how to extend Tailwind's default shadow and
3 min read
How to Add Tailwind CSS to HTML ? Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows.Integration Options:CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm: In
3 min read