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