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

227

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>
AyKarsi
źródło
2
Próbowałem to zrobić przez jakiś czas bez powodzenia. Zasadniczo nie można dodawać elementów HTML w obrębie wartości przycisku.
John Goodman
@JohnGoodman To powinna być odpowiedź, a nie komentarz. Przyjęta odpowiedź jest obejściem problemu, a nie bezpośrednią odpowiedzią na pytanie.
cartbeforehorse

Odpowiedzi:

394

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>
Simon Cunningham
źródło
12
Działa to jednak, proszę zobaczyć w3schools.com/tags/tag_button.asp, aby uzyskać więcej informacji o tym, do czego przeznaczony jest tag przycisku i jaki jest efekt jego działania w różnych przeglądarkach. Używaj tego ostrożnie, szczególnie w przypadku formularzy.
Matenia Rossides,
10
Przetestowałem to pomyślnie w Chrome, Firefox, Safari (na win7) i IE8 wewnątrz tagu <form> jako przycisk przesyłania
Pan Bell
4
Jedynym problemem, jaki miałem z tym podejściem, jest to, że w formularzu są inne przyciski, a następnie formularz nie zostanie przesłany po naciśnięciu klawisza Enter na klawiaturze, ponieważ jeden z pozostałych przycisków będzie miał pierwszeństwo. Jakieś znane obejścia?
Jeshurun,
2
Właśnie to robiłem. Jednak ikona nie pojawiła się po dodaniu do <i>tagu. To było bardzo szalone, dopóki nie odkryłem, że muszę wyczyścić pamięć podręczną. Jeśli napotkasz ten sam problem, ludzie, Ctrl+F5wyczyść pamięć podręczną i odśwież, i zobacz wspaniałą ikonę!
Aditya MP
2
Musiałem dodaćonClick="submit();"
TimP
67

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.

Christian Michael
źródło
9
To jest dla mnie najlepsze z obu światów. Otrzymujesz pożądany styl i nie używasz linku ani javascript.
AaronLS,
1
Chociaż dotyczy to stylizacji i wygląda świetnie, nie pozwala na przesłanie formularza, gdy użytkownik nacisnął Enter w polu wprowadzania. (Testowany tylko na FF17)
Richard
1
Najwyraźniej najlepsze rozwiązanie dla mnie. Twoje zdrowie!
Armel Larcier
14

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>
pengemizt
źródło
11

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.

Sandor Bedo
źródło
Proszę o odpowiedź na moje pytanie, jeśli masz jakieś pojęcie na ten temat. stackoverflow.com/questions/11295378/…
Krishnaprasad Varma
8

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ć”:

Justin
źródło
7

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

Brett Sanders
źródło
2
Co się dzieje, gdy wyszukiwarka indeksuje Twoją witrynę, widzi link o nazwie „Usuń”, decyduje: „Och, myślę, że pójdę za tym linkiem” i zaczyna robić bałagan w bazie danych? Z tego powodu zawsze mówiono mi, że zmiany należy zawsze wykonywać przy użyciu operacji innych niż GET.
Asfand Qazi
Prawdopodobnie używa autoryzacji do usuwania linków, jak większość ludzi.
Noz
2
Nie na temat, ponieważ OP nie pytał o szyny, ale ... Szyny rzeczywiście używają metody usuwania podczas integracji tego rodzaju hiperłącza za pomocą dyskretnego javascript. Gdyby ktoś zażądał tego linku bezpośrednio, domyślnie byłoby przedstawienie tego rekordu, a nie jego usunięcie. Zobacz tę odpowiedź, aby uzyskać więcej szczegółów: stackoverflow.com/a/2809412/252290
levous
Dotyczy to w szczególności przycisku wysyłania, a nie tagu zakotwiczenia.
pixelearth
6

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.

iiic
źródło
Chociaż może to działać, z pewnością nie jest tak eleganckie, jak użycie <button type = "Submit"> i będzie trudniejsze w utrzymaniu.
Richard
4

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.

Moeri
źródło
1

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

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>
naveen
źródło
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>

Ganesh Putta
źródło
1
Pytanie dotyczyło przesłania
Grigorij Kislin
To jest bootstrap 3 - pytanie dotyczyło formatu bootstrap 2, który używa innego formatu do wyświetlania ikon.
Calaelen
-1

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>
Livia
źródło