Wydaje się, że nie ma klasy dla typu wejściowego „Prześlij” w niesamowitej czcionce. Czy można użyć jakiejś klasy z czcionek niesamowitych do wprowadzania przycisków? Dodałem ikony do wszystkich przycisków (które faktycznie łączą się z klasą „btn” z twitter-bootstrap) w moich aplikacjach, ale nie mogę dodawać ikon przy „przesłaniu typu wejścia”.
Lub, jak korzystać z tego kodu:
input#image-button{
background: #ccc url('icon.png') no-repeat top left;
padding-left: 16px;
height: 16px;
}
HTML:
<input type="submit" id="image-button">Text</input>
(który wziąłem z HTML: jak zrobić przycisk przesyłania z tekstem i obrazem w nim? ) z niesamowitymi czcionkami?
twitter-bootstrap
twitter-bootstrap-rails
font-awesome
denis.peplin
źródło
źródło
<button type=submit>
i<input type=submit>
: stackoverflow.com/questions/3543615/…<button type="submit">
działa w dowolnej formie?HTML
Ponieważ
<input>
element wyświetla tylko wartość atrybutu wartość, musimy manipulować tylko nią:Używam

tutaj encji, która odpowiada U + F043, symbolowi „odcienia” Font Awesome.CSS
Następnie musimy go stylizować, aby użyć czcionki:
Który da nam symbol odcienia w Font Awesome, a drugi tekst w odpowiedniej czcionce.
Jednak ta kontrola nie będzie idealna w pikselach, więc może być konieczne samodzielne dostosowanie.
źródło
<input>
sw / o ikonę.font-family
właściwości stylu wbudowanego, aby użyć jej w dowolnym elemencie HTML zawierającym treść tekstową.Możesz użyć niesamowitej cheatheet utf czcionek
tutaj jest link do ściągawki http://fortawesome.github.io/Font-Awesome/cheatsheet/
źródło
<input type="button" class="fa" value=" Login"/>
bez bootstrap użyj klasy fa, aby go$("input.search").addClass("fa").val("\uf011 Login");
No cóż, technicznie nie jest możliwe uzyskanie
:before
i:after
pseudoelementy działają nainput
elementachZ W3C :
Miałem więc projekt, w którym miałem przyciski przesyłania w postaci
input
tagów iz jakiegoś powodu inni programiści ograniczyli mnie do używania<button>
tagów zamiast zwykłych przycisków wprowadzania, więc wpadłem na inne rozwiązanie, polegające na zawijaniu przycisków wspan
zestawie doposition: relative;
i całkowicie pozycjonowania ikonę za pomocą:after
pseudo.HTML
CSS
Demo
Teraz wszystko tutaj jest zrozumiałe, dotyczy jednej właściwości, tzn.
pointer-events: none;
Użyłem tego, ponieważ po najechaniu kursorem na:after
pseudo wygenerowaną treść przycisk nie kliknie, więc użycie wartościnone
zmusi akcję kliknięcia do przejścia przez tę treść .Z sieci deweloperów Mozilla :
Najedź kursorem na ikonę / czcionkę serca
Demoi zobacz, co się stanie, jeśli NIE użyjeszpointer-events: none;
źródło
Możesz używać klas przycisków
btn-link
ibtn-xs
typusubmit
, co spowoduje, że będzie mały niewidoczny przycisk z ikoną w środku. Przykład:źródło
Możliwe też tak
źródło
W przypadku wielu przesłanych danych, gdy potrzebujesz wybranej wartości, można to zrobić dość łatwo. Wystarczy utworzyć ukryte pole w formularzu i zmienić jego wartość w zależności od klikniętego przycisku. Na przykład w formularzu powiedz, że masz:
Korzystanie z jQuery:
Następnie możesz pobrać wartość klikniętego przycisku w zmiennej wpisu „Kliknięte”
źródło