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.
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
In the code below, we use the
fontawsome CDN to get our icons from the
fontawsome library and place those icons in a form.
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
fa fa_iconName syntax. Some basic styling was applied to the elements using CSS.
View all Courses