如何将图标和字体与相似的边缘对齐

Question

我试图使我的图标和文本具有相同的填充或边距。如果您运行代码，您会看到一个类别在图标附近，而另一个类别远远很大。我想保持一致性。我尝试了很多事情，但没有反映任何东西

.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

在i标签中您可以使用类fa-fw，因此所有图标均具有相同的宽度

示例

<i class="fa fa-television fa-fw"></i>

在所有i标签中添加此类

.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具有专门为此的类。FA-FW

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

http://fontawesome.io/examples/