Niesamowite czcionki, typ wprowadzania „Prześlij”

205

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?

denis.peplin
źródło

Odpowiedzi:

345

użyj przycisku type = "Prześlij" zamiast wprowadzania

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

do użycia czcionki Awesome 3.2.0

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>
Joao Leme
źródło
Niesamowite! Działa zgodnie z oczekiwaniami. Nadal potrzebujesz kilku kroków, aby dostosować to do simple_form lub utworzyć pomocnika, ale jest to stosunkowo łatwe.
denis.peplin
19
Należy również pamiętać o różnicach między <button type=submit>i <input type=submit>: stackoverflow.com/questions/3543615/…
Pavlo
@ stanislav-mayorov to działa. Jeśli używasz bieżącej wersji 4.7, musisz dostosować wersję 3.2.0 (od 2012 r.). Spróbuj zaktualizowanej odpowiedzi.
Joao Leme,
@JaoaoLeme <button type="submit">działa w dowolnej formie?
Ryuujo,
To nie działa, gdy chcę uniknąć ponownego ładowania strony.
Salvioner
87

HTML

Ponieważ <input>element wyświetla tylko wartość atrybutu wartość, musimy manipulować tylko nią:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

Używam &#xf043;tutaj encji, która odpowiada U + F043, symbolowi „odcienia” Font Awesome.

CSS

Następnie musimy go stylizować, aby użyć czcionki:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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.

Pavlo
źródło
1
Dziękuję za odpowiedź, działa, ale tak naprawdę nie mogę użyć tego podejścia, ponieważ czcionka wpływa na cały tekst wartości. Używam również „dużych ikon” w innych przyciskach ... Dla tych, którzy spróbują tego, kody czcionek są tutaj: github.com/FortAwesome/Font-Awesome/blob/master/sass/…
denis.peplin
Myślę, że to wszystko, co możemy tutaj zrobić. Osobiście sugeruję, abyś zostawił <input>sw / o ikonę.
Pavlo
działało dobrze, muszę użyć <input type = "
Submit
jest to lepsze niż dodanie „fa” do klasy elementu, ponieważ „fa” zmieni wysokość elementu.
Siwei Shen 申思维
Możesz także użyć font-familywłaściwości stylu wbudowanego, aby użyć jej w dowolnym elemencie HTML zawierającym treść tekstową.
SaidbakR
54

Możesz użyć niesamowitej cheatheet utf czcionek

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

tutaj jest link do ściągawki http://fortawesome.github.io/Font-Awesome/cheatsheet/

Bernard Nongpoh
źródło
2
To poprawiło mój dzień! Dzięki .. Dla innych użytkowników, zwróć uwagę na zdanie: skopiuj i wklej ikony ( nie Unicode ) bezpośrednio z tej strony do swojego projektu, tj. Skopiuj rzeczywistą ikonę i zadziała
PSR
17
<input type="button" class="fa" value="&#xf011; Login"/>bez bootstrap użyj klasy fa, aby go
uruchomić
2
Jeśli próbujesz ustawić to za pomocą javascript lub jQuery, użyj wariantu Unicode:$("input.search").addClass("fa").val("\uf011 Login");
Jamie Chong
2
Nawet z Bootstrap muszę dodać class = "fa", aby to działało.
denis.peplin
12

No cóż, technicznie nie jest możliwe uzyskanie :beforei :afterpseudoelementy działają na inputelementach

Z W3C :

12.1: Przed i po pseudoelementach

Autorzy określają styl i lokalizację generowanej treści za pomocą pseudoelementów: before i: after. Jak wskazują ich nazwy, pseudoelementy: before i: after określają lokalizację zawartości przed i po zawartości drzewa dokumentu elementu. Właściwość „content” w połączeniu z tymi pseudoelementami określa, co zostanie wstawione.


Miałem więc projekt, w którym miałem przyciski przesyłania w postaci inputtagó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 w spanzestawie do position: relative;i całkowicie pozycjonowania ikonę za pomocą :afterpseudo.

Uwaga: skrzypce demonstracyjne używa kodu zawartości dla FontAwesome 3.2.1, więc może być konieczna odpowiednia zmiana wartości contentwłaściwości.

HTML

<span><input type="submit" value="Send" class="btn btn-default" /></span>

CSS

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

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 :afterpseudo wygenerowaną treść przycisk nie kliknie, więc użycie wartości nonezmusi akcję kliknięcia do przejścia przez tę treść .

Z sieci deweloperów Mozilla :

Oprócz wskazania, że ​​element nie jest celem zdarzeń myszy, wartość none instruuje, aby zdarzenie myszy „przechodziło” przez element i kierowało na obiekt znajdujący się „pod” tym elementem.

Najedź kursorem na ikonę / czcionkę serca Demoi zobacz, co się stanie, jeśli NIE użyjeszpointer-events: none;

Pan Alien
źródło
1
Chociaż jest to bardzo fajne rozwiązanie, ma jedną dużą wadę: zdarzenia-wskaźniki: żadne nie jest obsługiwane przez IE <11 ( caniuse.com/#feat=pointer-events ). Powodem jest to, że właściwość pointer-events została stworzona dla elementów SVG (grafika wektorowa) i nie jest technicznie zawarta w specyfikacjach W3C dla innych elementów HTML (jeszcze wiki.csswg.org/spec/css4-ui#pointer-events ), chociaż obsługują wszystkie nowoczesne przeglądarki oprócz IE <11.
CaspianRoach
9

Możesz używać klas przycisków btn-linki btn-xstypu submit, co spowoduje, że będzie mały niewidoczny przycisk z ikoną w środku. Przykład:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>
Cyryl
źródło
5

Możliwe też tak

<button type="submit" class="icon-search icon-large"></button>
Mo.
źródło
1

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:

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

Korzystanie z jQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

Następnie możesz pobrać wartość klikniętego przycisku w zmiennej wpisu „Kliknięte”

RationalRabbit
źródło