Open In App

Semantic-UI Input Icon Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI input is a field that is used to get input from the users. Input type defines the type of input you asked from the user. It offers us a different variant of inputs like icon, labeled, action, transparent, inverted, Fluid, and Size. 

In this article, we will learn about the Semantic UI input icon variant.

Semantic UI Input icon variant is used when we want to display icons inside of any input field.

Semantic UI input icon variant class:

  • icon: This class is used to include the icon in the input field.

Syntax:

<div class="ui icon input">
  <input type="...">
  <i class="...icon"></i>
</div>

Example: The below example illustrates the Semantic UI input icon variation. In this example, we will create two input fields where we will use two different icons.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Input Icon Variation</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="header ui green">GeeksforGeeks</h1>
        <strong>Semantic-UI Input Variations Icon Variant</strong>
        <br><br>
        <strong>Username:</strong>
        <div class="ui left icon input">
            <input type="text" placeholder="Username">
            <i class="user icon"></i>
        </div>
        <strong>Password:</strong>
        <div class="ui left icon input">
            <input type="email" placeholder="Password">
            <i class="key icon"></i>
        </div>
    </center>
</body>
</html>


Output:

Semantic-UI Input Variations Icon Variant

Semantic-UI Input Variations Icon Variant

Reference link: https://semantic-ui.com/elements/input.html#icon



Last Updated : 10 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads