Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
communitycreator

How to add icons inside input elements in HTML

NDUKWE CHIDERA K.

Icons are very useful in user interfaces. They are used to visually aid understanding of different elements.

For example, just seeing the padlock icon can be indicative of the field being a password.

The <i> tag

In HTML, icons are added with the <i> tag. For it to be added inside the input elements, it must be added between the closing and opening tags of the elements in which you want the icon to be displayed.

For self-closing elements that do not have the closing tag, the <i> tag is placed right above the opening element tag, as in the case of the <input> element.

Code

In the code below, we use the fontawsome CDN to get our icons from the fontawsome library and place those icons in a form.

Explanation

In the snippet above, the <i> tags were placed above each of the input tags they were going to affect. The icons were called using the fontawesome fa fa_iconName syntax. Some basic styling was applied to the elements using CSS.

RELATED TAGS

html
css
communitycreator
RELATED COURSES

View all Courses

Keep Exploring