Я хочу использовать значки начальной загрузки Twitter на кнопках отправки ввода формы.
Примеры на http://twitter.github.com/bootstrap/base-css.html#icons в основном показывают стилизованные гиперссылки.
Самое близкое, что я получил, - это отображение значка рядом с кнопкой, но не внутри.
<div class="input-prepend">
<span class="add-on"><i class="icon-user icon-white"></i></span>
<input type="submit" class="btn-primary" value="Login" >
</div>
Ответы:
Вы можете использовать тег кнопки вместо ввода
источник
<i>
тег. Это было чрезвычайно невыносимо, пока я не обнаружил, что мне нужно очистить кеш. Если вы столкнулись с той же проблемой, ребята, нажмите,Ctrl+F5
чтобы очистить кеш и обновить, и увидите великолепную иконку!onClick="submit();"
Я думаю, что вы можете использовать метки для этой цели. Вот пример HTML-панели начальной загрузки Twitter:
В основном вы получаете элемент метки для ввода (type = submit) и затем скрываете фактическую отправку input. Пользователи могут щелкнуть по элементу метки и по-прежнему пройти через отправку формы.
источник
Я думаю, вы должны попробовать этот FontAwesome, предназначенный для использования с Twitter Bootstrap.
источник
Вы можете добавить <a/> со значком где-нибудь и привязать к нему действие JavaScrit, которое отправит форму. При необходимости в скрытом атрибуте могут быть указаны имя и значение имени + значение исходной кнопки отправки. С jQuery это просто, пожалуйста, позвольте мне избежать чистой версии JavaScript.
Предположим, что это оригинальная форма:
Измените это так:
... а затем волшебный JQuery:
Или, если вы хотите убедиться, что пользователь всегда может отправить форму - это то, что я бы сделал на вашем месте - вы можете оставить обычную кнопку отправки в форме и скрыть ее с помощью jQuery .hide (). Он гарантирует, что вход в систему по-прежнему работает без JavaScript и jQuery в соответствии с обычной кнопкой отправки (есть люди, использующие ссылки, w3m и аналогичные браузеры), но при этом предоставляет необычную кнопку со значком, если это возможно.
источник
Существует новый способ сделать это с помощью начальной загрузки 3:
Он находится на странице начальной загрузки глифов в разделе «Как использовать»:
источник
Я хотел перевести иконки Twitter Bootstrap в базовую форму Rails и наткнулся на этот пост. Немного покопавшись, я нашел простой способ сделать это. Не уверен, что вы используете Rails, но вот код. Ключ должен был передать блок помощнику представления link_to:
Если вы не используете Rails, вот выходной HTML для ссылок со значками (для кнопок редактирования, удаления и новой отправки)
А вот ссылка на скриншот с готовым результатом: http://grab.by/cVXm
источник
Есть один способ, как получить (начальные) глифы в
input type="submit"
. Использование css3 множественного фона.HTML:
и CSS:
Если несколько фонов перекрываются, вверху будет первый фон в
background:
обозначениях. Таким образом, сверху находится фон, который имеет отступ16px
с левой стороны (16px
это ширина одиночного глифика), на нижнем уровне - целое,glyphicons-halflings.png
а на нижнем уровне (охватывает весь элемент) - тот же градиент фона, что и на верхнем уровне.-48px 0px
это вырезка для значка поиска (icon-search
), но легко показать любой другой значок.Если кому-то нужен
:hover
эффект, фон должен быть снова напечатан в той же форме.источник
Я получил это на работу, но есть несколько предостережений, которые я еще не решил.
Во всяком случае, вот как это делается:
Возьмите среднюю кнопку ввода:
Вырежьте значок, который вы хотите использовать для кнопок отправки, из файла спрайтов глифов, убедитесь, что это изображение размером 14x14 пикселей. Да, в идеальных условиях вы могли бы повторно использовать спрайт, и если кто-нибудь это выяснит, я буду рад услышать, как это делается. :-)
Как только вы это сделаете, вы можете написать css для вашей кнопки ввода следующим образом:
Работает в Firefox 14, Chrome 21
Не работает в IE 9
tl; dr: Немного css позволяет автоматически помещать значки на кнопки отправки, но нужно поместить значок в отдельный файл, и он не будет работать в Internet Explorer.
источник
Я думаю, что это решение вашей проблемы
источник
источник
Используйте input-append с дополнительными классами
источник
Я думаю, что это лучший способ, прекрасно работает для меня.
источник