Dodaj ikonę, aby wysłać przycisk w pasku startowym Twitter 2

Chcę użyć ikon ładowania początkowego Twittera na przyciskach przesyłania formularza.

Przykłady na http://twitter.github.com/bootstrap/base-css.html#icons pokazują głównie hiperłącza w stylu.

Najbliżej, jaką przyszedłem, jest wyświetlenie ikony obok przycisku, ale nie w środku.

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

Możesz użyć tagu przycisku zamiast danych wejściowych

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

Myślę, że możesz w tym celu użyć etykiet. Oto przykład paska nawigacyjnego HTML paska startowego 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>

Zasadniczo dostajesz element etykiety dla danych wejściowych (typ = przesłanie), a następnie ukrywasz faktyczne przesłanie danych wejściowych. Użytkownicy mogą kliknąć element etykiety i nadal przejść przez przesłanie formularza.

Myślę, że powinieneś wypróbować ten FontAwesome zaprojektowany do użycia z Bootstrap na Twitterze.

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

Możesz gdzieś dodać <a/> z ikoną i powiązać z nią akcję JavaScrit, która prześle formularz. W razie potrzeby nazwa i wartość oryginalnej nazwy przycisku przesłania + wartość mogą znajdować się w ukrytym atrybucie. Z jQuery jest to łatwe, pozwól mi uniknąć wersji w czystym JavaScript.

Załóżmy, że jest to oryginalna forma:

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

Zmień to w ten sposób:

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

... a następnie magiczne jQuery:

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

Lub jeśli chcesz się upewnić, że użytkownik zawsze może przesłać formularz - to właśnie zrobiłbym w twoich butach - możesz zostawić zwykły przycisk przesyłania w formularzu i ukryć go za pomocą jQuery .hide (). Zapewnia, że ​​logowanie nadal działa bez JavaScript i jQuery zgodnie ze zwykłym przyciskiem przesyłania (są ludzie używający linków, w3m i podobnych przeglądarek), ale zapewnia fantazyjny przycisk z ikoną, jeśli to możliwe.

Jest nowy sposób na to w bootstrap 3:

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

Znajduje się on na stronie glifikonów bootstrap w sekcji „jak używać”:

Chciałem ikony Twitter Bootstrap do podstawowego formularza Rails i natknąłem się na ten post. Po krótkich poszukiwaniach wymyśliłem prosty sposób na zrobienie tego. Nie jestem pewien, czy używasz Railsów, ale oto kod. Kluczem było przekazanie bloku do pomocnika widoku 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 %>

Jeśli nie używasz Railsów, oto wyjściowy kod HTML linków z ikonami (do edycji, usuwania i nowych przycisków przesyłania)

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

A oto link do zrzutu ekranu końcowego wyniku: http://grab.by/cVXm

Istnieje jeden sposób, w jaki można dostać się do glifikonów (bootstrap) input type="submit". Używanie wielokrotnego tła css3.

HTML:

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

i 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 */
}

Jeśli nakłada się wiele tła, u góry będzie pierwsze tło w background:notacji. Tak więc u góry znajduje się tło, które jest wcięte 16pxod lewej strony ( 16pxjest to szerokość pojedynczego glifikonu), na dolnym poziomie jest cały, glyphicons-halflings.pnga na dolnym (obejmuje cały element) taki sam gradient tła, jak na najwyższym poziomie.

-48px 0pxjest ikoną cięcia dla wyszukiwania ( icon-search), ale łatwo jest wyświetlić dowolną inną ikonę.

Jeśli ktoś potrzebuje :hoverefektu, tło należy ponownie wpisać w tym samym formularzu.

Mam to do pracy, ale jest kilka ostrzeżeń, których jeszcze nie rozwiązałem.

W każdym razie tak to się robi:

Weź swój średni przycisk wprowadzania:

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

Wytnij żądaną ikonę przycisków przesyłania z pliku sprite glifikonów, upewnij się, że jest to obraz 14 x 14 pikseli. Tak, w idealnych okolicznościach możesz ponownie użyć duszka, a jeśli ktoś to wymyśli, z przyjemnością usłyszę, jak to się robi. :-)

Gdy to zrobisz, możesz napisać css dla przycisku wejściowego w następujący sposób:

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

Działa w Firefox 14, Chrome 21

Nie działa w IE 9

tl; dr: Przy odrobinie css możesz automatycznie umieszczać ikony na przyciskach przesyłania, ale musisz umieścić ikonę w osobnym pliku i nie będzie działać w Internet Explorerze.

Myślę, że to rozwiązanie twojego problemu

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

Użyj input-append z klasami dodatkowymi

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

Myślę, że to lepszy sposób, działa dobrze dla mnie.

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