Добавить значок для отправки кнопки в Twitter начальной загрузки 2

227

Я хочу использовать значки начальной загрузки 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>
AyKarsi
источник
2
Я пытался сделать это какое-то время безуспешно. По сути, вы не можете добавлять HTML-элементы в значение кнопки.
Джон Гудман
@JohnGoodman Это должен быть ответ, а не комментарий. Принятый ответ - это обходной путь, а не прямой ответ на вопрос.
верховая езда

Ответы:

394

Вы можете использовать тег кнопки вместо ввода

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>
Саймон Каннингем
источник
12
Это работает, однако, пожалуйста, смотрите w3schools.com/tags/tag_button.asp для получения дополнительной информации о том, для чего предназначен тег кнопки и его кросс-браузерный эффект. Используйте это с осторожностью, особенно с формами.
Матения Россидс
10
Я протестировал это в Chrome, Firefox, Safari (на win7) и IE8 внутри тега <form> как кнопка отправки
Mr Bell
4
Единственная проблема, с которой я столкнулся при таком подходе, заключается в том, что если в форме есть другие кнопки, то ваша форма не будет отправлена ​​при нажатии клавиши ввода на клавиатуре, так как одна из других кнопок будет иметь приоритет. Любые известные обходные пути?
Иешурун
2
Это было именно то, что я делал. Однако значок не появился после добавления в <i>тег. Это было чрезвычайно невыносимо, пока я не обнаружил, что мне нужно очистить кеш. Если вы столкнулись с той же проблемой, ребята, нажмите, Ctrl+F5чтобы очистить кеш и обновить, и увидите великолепную иконку!
Адитья депутат
2
Мне нужно было добавитьonClick="submit();"
TimP
67

Я думаю, что вы можете использовать метки для этой цели. Вот пример HTML-панели начальной загрузки Twitter:

<form class="navbar-search">
    <input type="text" class="search-query" placeholder="Search here" />        
    <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label>
    <input id="mySubmit" type="submit" value="Go" class="hidden" />
</form>

В основном вы получаете элемент метки для ввода (type = submit) и затем скрываете фактическую отправку input. Пользователи могут щелкнуть по элементу метки и по-прежнему пройти через отправку формы.

Кристиан Майкл
источник
9
Для меня это лучшее из обоих миров. Вы получаете стиль, который вы хотите, и не используете ссылку или JavaScript.
AaronLS
1
Несмотря на то, что это применяет стиль и выглядит великолепно, оно не позволяет отправлять форму, когда пользователь нажимает ввод в поле ввода. (Проверено только на FF17)
Ричард
1
Очевидно, лучшее решение для меня. Ура!
Армель Ларсье
14

Я думаю, вы должны попробовать этот FontAwesome, предназначенный для использования с Twitter Bootstrap.

<button class="btn btn-primary icon-save">Button With Icon</button>
pengemizt
источник
11

Вы можете добавить <a/> со значком где-нибудь и привязать к нему действие JavaScrit, которое отправит форму. При необходимости в скрытом атрибуте могут быть указаны имя и значение имени + значение исходной кнопки отправки. С jQuery это просто, пожалуйста, позвольте мне избежать чистой версии JavaScript.

Предположим, что это оригинальная форма:

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

Измените это так:

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

... а затем волшебный JQuery:

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

Или, если вы хотите убедиться, что пользователь всегда может отправить форму - это то, что я бы сделал на вашем месте - вы можете оставить обычную кнопку отправки в форме и скрыть ее с помощью jQuery .hide (). Он гарантирует, что вход в систему по-прежнему работает без JavaScript и jQuery в соответствии с обычной кнопкой отправки (есть люди, использующие ссылки, w3m и аналогичные браузеры), но при этом предоставляет необычную кнопку со значком, если это возможно.

Сандор Бедо
источник
Я прошу вас ответить на этот мой вопрос, если у вас есть представление об этом. stackoverflow.com/questions/11295378/…
Кришнапрасад Варма
8

Существует новый способ сделать это с помощью начальной загрузки 3:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Он находится на странице начальной загрузки глифов в разделе «Как использовать»:

Джастин
источник
7

Я хотел перевести иконки Twitter Bootstrap в базовую форму Rails и наткнулся на этот пост. Немного покопавшись, я нашел простой способ сделать это. Не уверен, что вы используете Rails, но вот код. Ключ должен был передать блок помощнику представления link_to:

<tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.id %></td>
        <td><%= link_to product.name, product_path(product) %></td>
        <td><%= product.created_at %></td>
        <td>
          <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %>
          Edit <i class="icon-pencil"></i>
          <% end %>

          <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %>
          Delete <i class="icon-trash icon-white"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to(new_product_path, :class => 'btn btn-primary') do %>
    New <i class="icon-plus icon-white"></i>
<% end %>

Если вы не используете Rails, вот выходной HTML для ссылок со значками (для кнопок редактирования, удаления и новой отправки)

# Edit
<a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a>

# New
<a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>

А вот ссылка на скриншот с готовым результатом: http://grab.by/cVXm

Бретт Сандерс
источник
2
Так что же происходит, когда поисковая система сканирует ваш сайт, видит ссылку под названием «Удалить», решает «О, я думаю, что я пойду по этой ссылке» и начинает связываться с вашей базой данных? Мне всегда говорили, что по этой причине изменения всегда должны выполняться с не-GET операциями.
Асфанд Кази
Вероятно, он использует авторизацию для удаления ссылок, большинство людей.
Noz
2
Не по теме, так как OP не спрашивал о rails, но ... Rails действительно использует метод удаления при интеграции такого рода гиперссылок через ненавязчивый javascript. Если кто-то запросит эту ссылку напрямую, по умолчанию будет представлена ​​эта запись, а не ее удаление. См. Этот ответ для более подробной информации: stackoverflow.com/a/2809412/252290
levy
Речь идет конкретно о кнопке отправки, а не о теге привязки.
pixelearth
6

Есть один способ, как получить (начальные) глифы в input type="submit". Использование css3 множественного фона.

HTML:

<form class="form-search"><input type="submit" value="Search">
</form>

и CSS:

.form-search input[type="submit"] {
    padding-left:16px; /* space for only one glyphicon */
    background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
    /* another hacks here  */
    background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}

Если несколько фонов перекрываются, вверху будет первый фон в background:обозначениях. Таким образом, сверху находится фон, который имеет отступ 16pxс левой стороны ( 16pxэто ширина одиночного глифика), на нижнем уровне - целое, glyphicons-halflings.pngа на нижнем уровне (охватывает весь элемент) - тот же градиент фона, что и на верхнем уровне.

-48px 0pxэто вырезка для значка поиска ( icon-search), но легко показать любой другой значок.

Если кому-то нужен :hoverэффект, фон должен быть снова напечатан в той же форме.

Шв
источник
Хотя это может сработать, оно, конечно, не так элегантно, как использование <button type = "submit">, и его будет сложнее поддерживать.
Ричард
4

Я получил это на работу, но есть несколько предостережений, которые я еще не решил.

Во всяком случае, вот как это делается:

Возьмите среднюю кнопку ввода:

<input type="submit" class="btn btn-success" value="Save">

Вырежьте значок, который вы хотите использовать для кнопок отправки, из файла спрайтов глифов, убедитесь, что это изображение размером 14x14 пикселей. Да, в идеальных условиях вы могли бы повторно использовать спрайт, и если кто-нибудь это выяснит, я буду рад услышать, как это делается. :-)

Как только вы это сделаете, вы можете написать css для вашей кнопки ввода следующим образом:

input[type='submit'] {
    background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
    background-repeat: no-repeat;
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

input[type='submit']:hover {
    background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
}

Работает в Firefox 14, Chrome 21

Не работает в IE 9

tl; dr: Немного css позволяет автоматически помещать значки на кнопки отправки, но нужно поместить значок в отдельный файл, и он не будет работать в Internet Explorer.

Moeri
источник
1

Я думаю, что это решение вашей проблемы

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>
Нэвин
источник
1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
 
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>

Ганеш Путта
источник
1
Вопрос был о том, чтобы отправить
Григорий Кислин
Это bootstrap 3 - вопрос касался формата bootstrap 2, который использует другой формат для отображения иконок.
Calaelen
-1

Я думаю, что это лучший способ, прекрасно работает для меня.

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>
Livia
источник