список ссылок с иконками слева

[mstdmstd]

Всем привет,
Подскажите я хочу сделать список ссылок с иконками слева в коде вроде:

            <div class="widget">                <div class="widget-body padding-none">                    <h4 class="innerAll bg-gray border-bottom margin-bottom-none">Settings Items</h4>                    <ul class="fa-ul innerAll">                        <li>                            <a href="/business/scheduler/" class="fa heading glyphicons settings"><i></i>{"Appointments"|translate}</a>                        </li>                        <li>                            <a href="/business/clients/" class="heading glyphicons icon-user-2" ><i style="position:relative;left:-100px;"></i>{"Clients"|translate}</a>                        </li>                        <li>                            <a href="/business/promotions/" class="heading glyphicons icon-reply-all-fill"><i></i><span style=";                            ">{"Promotions"|translate}</span></a>                        </li>                    </ul>                </div>            </div>

Хочется чтобы иконки были слева одна под другой а ссылки справа от иконок
Но иконки у меня гуляют:

Я не нашел способа как выравнить иконки. Как можно это сделать ?

[Sergik+]

Всем привет,

Подскажите я хочу сделать список ссылок с иконками слева в коде вроде:

            <div class="widget">                <div class="widget-body padding-none">                    <h4 class="innerAll bg-gray border-bottom margin-bottom-none">Settings Items</h4>                    <ul class="fa-ul innerAll">                        <li>                            <a href="/business/scheduler/" class="fa heading glyphicons settings"><i></i>{"Appointments"|translate}</a>                        </li>                        <li>                            <a href="/business/clients/" class="heading glyphicons icon-user-2" ><i style="position:relative;left:-100px;"></i>{"Clients"|translate}</a>                        </li>                        <li>                            <a href="/business/promotions/" class="heading glyphicons icon-reply-all-fill"><i></i><span style=";                            ">{"Promotions"|translate}</span></a>                        </li>                    </ul>                </div>            </div>

Хочется чтобы иконки были слева одна под другой а ссылки справа от иконок

Но иконки у меня гуляют:

Я не нашел способа как выравнить иконки. Как можно это сделать ?

Выложите css, непонятно как вы выравниваете, задача не сложная здесь.

[Q4Dizzy]

картинки у li задавайте фоном через 

background-image: ;

или короткий вариант 

background: url("Путь к картинке") no-repeat scroll left center transparent;

и добавьте li левый внутренний отступ

padding-left: отступ;

если картинки все разные - добавьте каждому li (или селектору, какой вам нужен.) свой класс (а если он уже есть - то ->) управляйте уже ими через css.

Edited September 25, 2014 by Q4Dizzy