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>
Odpowiedzi:
Możesz użyć tagu przycisku zamiast danych wejściowych
źródło
<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+F5
wyczyść pamięć podręczną i odśwież, i zobacz wspaniałą ikonę!onClick="submit();"
Myślę, że możesz w tym celu użyć etykiet. Oto przykład paska nawigacyjnego HTML paska startowego Twitter:
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.
źródło
Myślę, że powinieneś wypróbować ten FontAwesome zaprojektowany do użycia z Bootstrap na Twitterze.
źródło
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:
Zmień to w ten sposób:
... a następnie magiczne jQuery:
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.
źródło
Jest nowy sposób na to w bootstrap 3:
Znajduje się on na stronie glifikonów bootstrap w sekcji „jak używać”:
źródło
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:
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)
A oto link do zrzutu ekranu końcowego wyniku: http://grab.by/cVXm
źródło
Istnieje jeden sposób, w jaki można dostać się do glifikonów (bootstrap)
input type="submit"
. Używanie wielokrotnego tła css3.HTML:
i CSS:
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ęte16px
od lewej strony (16px
jest to szerokość pojedynczego glifikonu), na dolnym poziomie jest cały,glyphicons-halflings.png
a na dolnym (obejmuje cały element) taki sam gradient tła, jak na najwyższym poziomie.-48px 0px
jest ikoną cięcia dla wyszukiwania (icon-search
), ale łatwo jest wyświetlić dowolną inną ikonę.Jeśli ktoś potrzebuje
:hover
efektu, tło należy ponownie wpisać w tym samym formularzu.źródło
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:
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:
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.
źródło
Myślę, że to rozwiązanie twojego problemu
źródło
źródło
Użyj input-append z klasami dodatkowymi
źródło
Myślę, że to lepszy sposób, działa dobrze dla mnie.
źródło