Выравнивание значков в Bootstrap

Question

У меня есть веб-сайт, который использует Bootstrap 3. На этом веб-сайте у меня есть выпадающее меню. Каждый элемент меню состоит из значка и имени. Мой вызов состоит в том, что мои иконки не выложены должным образом. Значки не находятся в строке и текст не находится в строке. Он выглядит бессвязным. Мой HTML выглядит так:

<ul class="dropdown-menu" role="menu"> 
    <li><a target="_blank" href="/User/Create"><span class="fa fa-user-plus" style="margin-right: 10px;"></span>Add User</a></li> 
    <li><a target="_blank" href="/User/Edit"><span class="fa fa-user" style="margin-right: 10px;"></span>Edit User</a></li> 
    <li><a target="_blank" href="/User/Delete"><span class="fa fa-user-times" style="margin-right: 10px;"></span>Delete User</a></li> 
    <li><a target="_blank" href="/Buiding/Add"><span class="fa fa-building" style="margin-right: 10px;"></span>Building</a></li> 
</ul> 

Что я делаю неправильно? Что мне нужно сделать, чтобы мои значки и текст выстраивались в линию?

Answer 1

Hard без примера, но что-то вы можете попробовать это добавление высоты к <li> элемента (например, 60px), добавив display:block, width:100%, height:100% и line-height такой же, как высота, которую вы установили на элементе <li> (60px в нашем примере)

попробуйте, это может вам помочь.

Answer 2

Чтобы установить значки с фиксированной шириной, необходимо добавить класс fa-fw.

<ul class="dropdown-menu" role="menu"> 
    <li><a target="_blank" href="/User/Create"><i class="fa fa-fw fa-user-plus"></i>&nbsp; Add User</a></li> 
    <li><a target="_blank" href="/User/Edit"><i class="fa fa-fw fa-user"></i>&nbsp; Edit User</a></li> 
    <li><a target="_blank" href="/User/Delete"><i class="fa fa-fw fa-user-times"></i>Delete User</a></li> 
    <li><a target="_blank" href="/Buiding/Add"><i class="fa fa-fw fa-building"></i>&nbsp; Building</a></li> 
</ul> 

Doc: http://fortawesome.github.io/Font-Awesome/examples/#fixed-width