Bootstrap: icons in form elements

HTML

<!-- Created by Email Not Activated -->

<!DOCTYPE html>
<html>
<!--MADE BY ROCK STAR-->
    <head>
    <meta charset="utf-8">
    <!-- Responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="container" class="table-responsive">
        
            <h1 id="title">How to add icons beside the input elements</h1>
            
            <span>     Hello programmers! Today I'm gonna teach you how to put icons beside the <code>input</code> tags. It is used to give hints to the user and make your form look more elegant and neat. <br /><br />
            <div class="alert alert-warning">
            <span>NOTE: Before you do what's on the tutorial, You must be familiar with Bootstrap.</span>  
            </div>
            So these are the examples: <br />
            </span>
            
            <div class="input-group">
                <span class="input-group-addon">
                <i class="glyphicon glyphicon-user"></i>
                </span>
                <input type="text" placeholder="Username" class="form-control"/>
            </div><br />
            
            <div class="input-group">
                <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i>
                </span>
                <input type="password" placeholder="Password" class="form-control"/>
            </div><br />
            
            <span>     The example above shows an
            <code>input</code> tag with an icon 
            embedded to the left. Now I'm gonna show you the codes of these two input fields below and elaborate after.
            </span>
            
                <pre>
<tag><</tag><tag>div</tag> <class>class</class>=<value>"input-group"</value><tag>></tag>
  <tag><</tag><tag>span</tag> <class>class</class>=<value>"input-group-addon"</value><tag>></tag>
     <tag><</tag><tag>i</tag> <class>class</class>=<value>"glyphicon glyphicon-user"</value><tag>></tag><tag><</tag><tag>/i></tag>
  <tag><</tag><tag>/span></tag>
     <tag><</tag><tag>input</tag> <tag></tag> <class>type</class>= <value>"text"</value> <class>placeholder</class>=<value>"Username"</value> 
     <class>class</class>=<value>"form-control"</value><tag>/</tag><tag>></tag>
<tag><</tag><tag>/div></tag>

<tag><</tag><tag>div</tag> <class>class</class>=<value>"input-group"</value><tag>></tag>
  <tag><</tag><tag>span</tag> <class>class</class>=<value>"input-group-addon"</value><tag>></tag>
     <tag><</tag><tag>i</tag> <class>class</class>=<value>"glyphicon glyphicon-lock"</value><tag>></tag><tag><</tag><tag>/i></tag>
  <tag><</tag><tag>/span></tag>
     <tag><</tag><tag>input</tag> <tag></tag> <class>type</class>= <value>"text"</value> <class>placeholder</class>=<value>"Password"</value> 
     <class>class</class>=<value>"form-control"</value><tag>/</tag><tag>></tag>
<tag><</tag><tag>/div></tag>
                </pre>
        <span>     The <code>.input-group</code> class from the <code>div</code> tag is used as a container for combining or appending icons, text or buttons to the <code>input</code> element.</span><br /><br />
        <span>     Next is the <code>.input-group-addon</code> class on the <code>span</code> tag. This will serve as the container of the icon, text or buttons to be appended with the <code>input</code> element.</span> <br /><br />
        <span>     Next is the <code>i</code> element which is declared inside the <code>span</code> element. This is where you put your icons. You can also change this as a text, <code>button</code>, <code>radio</code>, <code>select</code> or <code>checkbox</code> depends on what you desire.</span><br /><br />
        
            <div class="input-group">
                <span class="input-group-addon">
                <span>email@example.com</span>
                </span>
                <input type="email" placeholder="Email" class="form-control"/>
            </div><br />
            
            <div class="input-group">
                <span class="input-group-addon">
                <input type="checkbox" class="btn btn-primary" value="Button" />
                </span>
                <input type="text" placeholder="Checkbox" class="form-control"/>
            </div><br />
            
            <div class="input-group">
                <span class="input-group-addon">
                <input type="radio" />
                </span>
                <input type="text" placeholder="Radio button" class="form-control"/>
            </div><br />
            
            <div class="input-group">
                <span class="input-group-addon">
                <select>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
                </span>
                <input type="text" placeholder="Dropdown" class="form-control"/>
            </div><br />
        
        <span>     Now that you have the icon, you can now add the <code>input</code> elements outside the <code>span</code> tag. You can use any <code>input</code> type you need  in this section. Just don't forget to add <code>.form-control</code> class inside the <code>input</code> tag in order to work perfectly.</span> <br /><br />
        
        <div class="alert alert-warning">NOTE: You can also append your icons to the right. Just put the <code>input</code> tag first followed by the icons or text or button codes like the image example below.</span>
        </div>
        
        
            <div class="input-group">
                <input type="text" placeholder="Username" class="form-control"/>
                <span class="input-group-addon">
                <i class="glyphicon glyphicon-user"></i>
                </span>
            </div><br />
            
            <div class="input-group">
                <input type="password" placeholder="Password" class="form-control"/>
                <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i>
                </span>
            </div><br />
        
        <span>     Now that's how you add icons at the side of the <code>input</code> tags. Always remember, think twice code once! Enjoy!</span>
        <br /><br />
        
        <span>Credits to: <br /> <a href="https://getbootstrap.com" target="_parent">Get Bootstrap</a><br />
        <a href="https://w3schools.com" target="_parent">W3Schools</a>
        </span><br /><br />
        
        
        <center>
            <span>Made by: <code>Rock Star</code></span>
        </center>
        </div>
    </body>
</html>

CSS

/* Created by Email Not Activated */

body {
    background-color: slategray;
    text-align: justify;
}

#container{ 
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
    background-color: white;
}

#container{
    width: 96%;
}

#container2{
    width: 100%;
    border-radius: 5px;
}

#title{
    color: steelblue;
    font-weight: bold;
    font-size: 23px;
    text-align: center;
}

pre{
    padding-bottom: 0px;
    background-color: darkslategray;
    color: white;
}

tag{color: salmon;}
class{color:tomato;}
value{color:cadetblue;}

JS

Resources