Here at this festival, you'll find a unique menu on the sidebar. The menu is created using an HTML list with the following structure:
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="index.html"><i class="icon-home"></i> Home</a>
</li>
<li>
<a href="development.html">Development</a>
</li>
<li>
<a href="management.html">Management</a>
</li>
<li>
<a href="learning.html">Learning</a>
</li>
<!-- more menu entries -->
</ul>
The menu may not look perfectly aligned as some labels have icons next to them while others don't. This causes unevenness in appearance.
Is there a way to align the labels vertically without adding extra HTML elements, which would interfere with existing Bootstrap rules?