Есть ли способ добавить номер внутри значков JQM

Question

Я пытаюсь заменить значок стрелки-l на цифры в JQM для страницы формы.

вот скрипка ОБНОВЛЕННАЯ СКИДКА

Как вы можете видеть в скрипке, которую я использую arrow-l Значки, которые я хочу сделать, это то, как поменять эти значки на цифры вроде 1-----2------3----4 .

Заранее спасибо

Answer 1

Рабочий пример: http://jsfiddle.net/Gajotres/B33K9/

Просто найдите себе лучше выглядящие иконки

HTML:

<div class="ui-block-a"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-btn-icon-notext ui-btn-inline ui-icon-one">Button</a><div class="line" style="margin-left:62%"></div>

</div>

<div class="ui-block-b"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-btn-icon-notext ui-btn-inline ui-icon-two">Button</a><div class="line" style="margin-right:62%"></div><div class="line" style="margin-left:62%"></div>
</div>
<div class="ui-block-c"><a class="center1 ui-shadow ui-btn ui-corner-all ui-btn-icon-notext ui-btn-inline ui-icon-three">Button</a><div class="line" style="margin-right:62%; top:-21px"></div>
    <div class="line" style="margin-left:62%"></div>
</div>
<div class="ui-block-d"><a class="center1 ui-shadow ui-btn ui-corner-all ui-btn-icon-notext ui-btn-inline ui-icon-four" data-icon="four">Button</a><div class="line" style="margin-right:62%;top:-21px"></div>

CSS:

.ui-icon-one:after {
    background-image: url('http://secondavenuesagas.com/images/bullets/1.gif');
}

.ui-icon-two:after {
    background-image: url('http://secondavenuesagas.com/images/bullets/2.gif');
}

.ui-icon-three:after {
    background-image: url('http://secondavenuesagas.com/images/bullets/3.gif');
}

.ui-icon-four:after {
    background-image: url('http://secondavenuesagas.com/images/bullets/4.gif');
}