Jak mogę dodać glifikon do pola wprowadzania tekstu? Na przykład chcę mieć „icon-user” przy wprowadzaniu nazwy użytkownika, coś takiego:
css
twitter-bootstrap
glyphicons
doovers
źródło
źródło
Odpowiedzi:
Bez Bootstrap:
Za sekundę przejdziemy do Bootstrap, ale oto podstawowe koncepcje CSS w grze, aby zrobić to sam. Jak wskazuje broda drapieżna , możesz to zrobić za pomocą CSS, absolutnie umieszczając ikonę wewnątrz elementu wejściowego. Następnie dodaj dopełnienie po obu stronach, aby tekst nie nakładał się na ikonę.
Tak dla następującego HTML:
Możesz użyć następującego CSS, aby wyrównać lewy i prawy glif:
Demo w grze Plunker
Z Bootstrap:
Jak wskazuje bufor , można to zrobić natywnie w ramach Bootstrap za pomocą stanów sprawdzania poprawności z opcjonalnymi ikonami . Odbywa się to poprzez nadanie
.form-group
elementowi klasy.has-feedback
i ikony klasy.form-control-feedback
.Najprostszym przykładem byłoby coś takiego:
Plusy :
Wady :
Aby przezwyciężyć wady, zebrałem tę prośbę o pociągnięcie ze zmianami, aby obsługiwać wyrównane do lewej ikony. Ponieważ jest to stosunkowo duża zmiana, odłożono ją do czasu przyszłej wersji, ale jeśli potrzebujesz tych funkcji dzisiaj , oto prosty przewodnik implementacji:
Po prostu dołącz te zmiany formy w css (również wstawiane za pomocą ukrytego fragmentu stosu u dołu)
* MNIEJSZA : alternatywnie, jeśli budujesz za pomocą mniej , oto forma zmienia się w mniej
Następnie wystarczy dołączyć klasę
.has-feedback-left
do dowolnej grupy, która ma klasę.has-feedback
, aby wyrównać ikonę w lewo.Ponieważ istnieje wiele możliwych konfiguracji HTML dla różnych typów formularzy, różnych rozmiarów kontrolek, różnych zestawów ikon i różnych widoczności etykiet, stworzyłem stronę testową, która pokazuje prawidłowy zestaw HTML dla każdej permutacji wraz z pokazem na żywo.
Oto demo w Plunker
Nie znalazłeś tego, czego szukałeś ? Spróbuj tych podobnych pytań:
Dodatek CSS dla ikon opinii wyrównanych do lewej
Pokaż fragment kodu
źródło
.focusedInput
Klasa jest zdefiniowana po.input-group-addon
tak gdy arkusze stylów Kaskada w dół, ostatnie style powinny mieć pierwszeństwo. Czy możesz lepiej opisać scenariusz, który doprowadził do tego, że jest to problem?<i class="icon-user"></i>
na<i class="fa fa-user"></i>
. Za każdym razem, gdy zastanawiasz się nad aktualizacją bibliotek zewnętrznych, przeczytaj uwagi do wydania i nową dokumentację, aby ustalić, czy Twoja aplikacja jest nadal kompatybilna czy wymaga aktualizacji.Oficjalny sposób. Nie wymaga niestandardowego CSS:
DEMO: http://jsfiddle.net/LS2Ek/1/
To demo jest oparte na przykładzie z dokumentów Bootstrap. Przewiń w dół do „Z opcjonalnymi ikonami” tutaj http://getbootstrap.com/css/#forms-control-validation
źródło
{left:0}
do klasy glifikonu powinno zająć się wyrównaniem do lewej. jsfiddle.net/LS2Ek/30 . Jednak podoba mi się twoje podejście do konturu i cieniowania. Wygląda schludnie!left:0
nie określa już początku danych wejściowych. Musisz także dodać dopełnienie po lewej stronie wejścia i usunąć po prawej stronie. Mimo to bardzo ładne i czyste rozwiązanie. Myślę, że zidentyfikowanie lewej strony wejścia jest trudną częścią, w którejposition:relative
przydaje się opakowanie .Oto alternatywa tylko dla CSS. Skonfigurowałem to dla pola wyszukiwania, aby uzyskać efekt podobny do Firefoksa (i setki innych aplikacji).
Oto skrzypce .
HTML
CSS
źródło
Oto jak to zrobiłem, używając tylko domyślnego bootstrap CSS v3.3.1:
I tak to wygląda:
źródło
To „oszustwo” będzie działać z efektem ubocznym, że klasa glifikonów zmieni czcionkę dla kontroli wprowadzania.
Skrzypce
Jeśli chcesz pozbyć się efektu ubocznego, możesz usunąć klasę „glyphicon” i dodać następujący CSS (Może być lepszy sposób na stylizację pseudoelementu zastępczego, a ja testowałem tylko na Chrome).
Skrzypce
Prawdopodobnie jeszcze czystsze rozwiązanie:
Skrzypce
CSS
HTML
źródło
Można to zrobić za pomocą klas z oficjalnej wersji bootstrap 3.x, bez żadnego niestandardowego css.
Użyj
input-group-addon
przed znacznikiem wejściowym,input-group
a następnie użyj dowolnego z glifikonów, oto kodOto wynik
Aby go dostosować, dodaj kilka linii niestandardowego css do własnego pliku custom.css (w razie potrzeby dostosuj padding)
Po ustawieniu tła
input-group-addon
przezroczystego i zerowaniu lewego gradientu znacznika wejściowego wejście będzie wyglądało płynnie. Oto dostosowane wyjścieOto przykład jsbin
To rozwiąże niestandardowe problemy CSS z nakładaniem się etykiet, wyrównaniem podczas używania
input-lg
i skupieniem się na problemie z kartami.źródło
Oto rozwiązanie inne niż bootstrap, które upraszcza znaczniki, osadzając reprezentację obrazu glifikonu bezpośrednio w CSS przy użyciu kodowania URI base64.
źródło
Jeśli używasz Fontawesome, możesz to zrobić:
Wynik
Pełną listę kodów Unicode można znaleźć w pełnym zestawieniu ikon Font Awesome 4.6.3
źródło
źródło
Oto inny sposób, aby to zrobić, umieszczając glifik za pomocą
:before
pseudoelementu w CSS.Działa demo w jsFiddle
W przypadku tego HTML:
Użyj tego CSS ( kompatybilny z przeglądarkami Bootstrap 3.xi Webkit )
Jak powiedział @Frizi, musimy dodać
pointer-events: none;
aby kursor nie zakłócał fokusa wejściowego. Wszystkie pozostałe reguły CSS służą do centrowania i dodawania odpowiednich odstępów.Wynik:
źródło
Możesz użyć kodu Unicode HTML
Aby dodać ikonę użytkownika, po prostu dodaj

doplaceholder
atrybutu lub gdziekolwiek chcesz.Możesz sprawdzić ten ściągawka .
Przykład:
źródło
Mam również jedną decyzję w tej sprawie z Bootstrap 3.3.5:
Na wejściu mam coś takiego:
źródło
Testowane z Bootstrap 4.
Weź
form-control
i dodajis-valid
do swojej klasy. Zauważ, jak kontrolka zmienia kolor na zielony, ale co ważniejsze, zauważ ikonę znacznika wyboru po prawej stronie kontrolki? Tego właśnie chcemy!Przykład:
źródło
Jeśli masz szczęście, że potrzebujesz tylko nowoczesnych przeglądarek: wypróbuj css transform translate. Nie wymaga to owijania i można go dostosować, aby umożliwić większy odstęp między wejściami [typ = liczba], aby pomieścić pokrętło wejściowe lub przesunąć je na lewo od uchwytu.
http://codepen.io/anon/pen/RPRmNq?editors=110
źródło
Powinieneś być w stanie to zrobić z istniejącymi klasami bootstrap i odrobiną niestandardowej stylizacji.
Edytuj Ikona jest wskazywana przez
icon-user
klasę. Ta odpowiedź została napisana w czasie Bootstrap w wersji 2. Możesz zobaczyć odniesienie na następującej stronie: http://getbootstrap.com/2.3.2/base-css.html#imagesźródło