Как поместить значок шрифтелло во входное значение?

Скажем, у меня есть этот код:

<input type="submit" value="Send" />

Но после текста «Отправить» я хочу иметь значок fontello. Очевидно, это не работает:

<input type="submit" value="Send <i class='icon-right-circle'></i>" />

В моем файле fontello demo.html код для этого значка — 0xe81c. Разве нельзя поместить этот значок во входное значение? Как объект HTML или что-то в этом роде?

Спасибо!


html fontello
person Corey    schedule 12.06.2014    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Это должно работать:

<input type="submit" value="Send &#xf001;" style="font-family:icons" />

Есть два шага:

  1. используйте &#xf001; для вывода символа. Вы можете найти код в CSS-файле fontello, что-то вроде content:'\f001', просто замените \f001 -> &#xf001;.

  2. установить семейство шрифтов для этого элемента. Я использую icons в своем коде, вы должны проверить имя шрифта в файле css.

Дальнейший шаг: вы можете настроить свой собственный класс:
.myfont { font-family:icons; }

а HTML-код будет таким:
<input type="submit" value="Send &#xf001;" class="myfont" />

person Fancyoung    schedule 26.08.2014
comment
Этот ответ очень классный, я не знал, что ты можешь это сделать. Обычно я просто использую абсолютное позиционирование. - person Nathaniel Flick; 02.01.2015
comment
По умолчанию семейство шрифтов для fontello установлено как font-family: fontello. - person RobKohr; 01.07.2015
comment
@RobKohr по умолчанию семейство шрифтов устанавливается как семейство шрифтов: fontello только при использовании класса, а не для всех шрифтов. - person Fancyoung; 01.07.2015

arrow_upward
0
arrow_downward

Вы можете попробовать это в CSS:

input[type='submit'] {
    background-image: url(images/icon.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

Другой вариант — использовать button type="submit" вместо input.

<button type="submit" class="btn btn-success">
    <i class='icon-right-circle'></i> Text
</button>
person Jatin    schedule 12.06.2014
comment
Это побеждает всю цель fontello. - person Corey; 13.06.2014
comment
Пожалуйста, проверьте обновленный ответ - person Jatin; 13.06.2014
comment
Это все еще не отвечает на мой вопрос. Я знаю другие способы заставить кнопку работать (ваш метод, а также создание простой ссылки привязки и отправка формы через JS). Я спрашиваю, есть ли способ поместить значок в значение ввода. - person Corey; 13.06.2014