Додати піктограму для подання кнопки у Twitter twitter bootstrap 2

Я хочу використовувати піктограми завантажувального закладу щебетання на кнопках подання форми введення.

Приклади 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>

Ви можете використовувати тег кнопок замість введення

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

Я думаю, ви можете використовувати для цього теги міток. Ось зразок навігатору 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), а потім приховуєте фактичне подання вводу. Користувачі можуть натиснути на елемент мітки та все-таки пройти через подання форми.

Я думаю, ви повинні спробувати цей FontAwesome, розроблений для використання у Twitter Bootstrap.

<button class="btn btn-primary icon-save">Button With Icon</button>

Ви можете десь додати <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 та подібні браузери), але надає фантазійну кнопку з піктограмою, якщо це можливо.

Існує новий спосіб зробити це за допомогою завантажувальної програми 3:

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

Він знаходиться на сторінці гліфіконів завантажувальної машини в розділі "як користуватися":

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

<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

Існує один із способів залучення гліфіконів (завантажувальних) 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ефект, фон потрібно знову набрати в тій же формі.

Я змусив це працювати, але є кілька застережень, які я ще не вирішив.

У будь-якому випадку це робиться так:

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

<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.

Я думаю, що це рішення вашої проблеми

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

Використовуйте введення-додавання з додатковими класами

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Я думаю, що це кращий спосіб, добре працює для мене.

<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>