How to align icons and fonts with similar margin - html

Question

I am trying to get my icons and text to have same padding or margin. If you run the code you will see one category is near an icon and other one is far. I want to have consistency. I tried a lot of things but it doesnt reflect anything
.category_nav
{
height: 40px;
margin-top: 38px;
}
.category_nav_ul
{
list-style-type: none;
padding:0;
}
.category_nav_ul > li
{
display: inline-block;
}
#category_nav_ul_category
{
width: 380px;
cursor: pointer;
}
#category_nav_div
{
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
#categories_content
{
margin-top: 10px;
}
.category_nav_div .content:hover
{
}
.categories
{
list-style: none;
}
.category
{
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
border: 0;
border-radius: 0;
}
.category:hover
{
border: 2px;
background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.category_icon
{
width: 20px !important;
padding-right: 5px;
background-color: red;
}
.category_content
{
margin-left: 15px !important;
}
.light-border
{
border: 1px solid #e8e8e8;
border-top: none;
}
h2.flash_title
{
color: rgb(120, 120, 120);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: #fff;
color: #666;
font-size: 14px;
padding-left: 19px;
font-weight: 400;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="content" id="categories_content">
<ul class="categories list-group">
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-camera"></i>
</span>
<span class="category_content">
Camera
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-info-circle"></i>
</span>
<span class="category_content">
Clothes
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-mobile"></i>
</span>
<span class="category_content">
Mobiles
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-info-circle"></i>
</span>
<span class="category_content">
Graphics Cards
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-television"></i>
</span>
<span class="category_content">
Television
</span>
</li>
</ul>
</div>
</div>

Answer 1

In i tag you can use a class fa-fw, so all the icons has the same width
Example
<i class="fa fa-television fa-fw"></i>
add this class in all the i tags
.category_nav
{
height: 40px;
margin-top: 38px;
}
.category_nav_ul
{
list-style-type: none;
padding:0;
}
.category_nav_ul > li
{
display: inline-block;
}
#category_nav_ul_category
{
width: 380px;
cursor: pointer;
}
#category_nav_div
{
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
#categories_content
{
margin-top: 10px;
}
.category_nav_div .content:hover
{
}
.categories
{
list-style: none;
}
.category
{
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
border: 0;
border-radius: 0;
}
.category:hover
{
border: 2px;
background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.category_icon
{
width: 20px !important;
padding-right: 5px;
background-color: red;
}
.category_content
{
margin-left: 15px !important;
}
.light-border
{
border: 1px solid #e8e8e8;
border-top: none;
}
h2.flash_title
{
color: rgb(120, 120, 120);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: #fff;
color: #666;
font-size: 14px;
padding-left: 19px;
font-weight: 400;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="content" id="categories_content">
<ul class="categories list-group">
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-camera"></i>
</span>
<span class="category_content">
Camera
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-info-circle"></i>
</span>
<span class="category_content">
Clothes
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-mobile"></i>
</span>
<span class="category_content">
Mobiles
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-info-circle"></i>
</span>
<span class="category_content">
Graphics Cards
</span>
</li>
<li class="category list-group-item">
<span class="category_icon">
<i class="fa fa-fw fa-television"></i>
</span>
<span class="category_content">
Television
</span>
</li>
</ul>
</div>
</div>

Answer 2

Font-awesome has a class specially to do that. fa-fw
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
http://fontawesome.io/examples/