Dodaj Glificon Bootstrap do Input Box

340

Jak mogę dodać glifikon do pola wprowadzania tekstu? Na przykład chcę mieć „icon-user” przy wprowadzaniu nazwy użytkownika, coś takiego:

wprowadź opis zdjęcia tutaj

doovers
źródło
5
To jest moje alternatywne rozwiązanie (dla 2014 r.) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Richard Cotrina
późno na imprezę, ale sprawdź moją odpowiedź, używam tylko bootstrap, aby uzyskać ten efekt, i aby zmienić kolor i ramkę, używam dwóch linii css. rozwiązuje inne problemy, które zostały omówione w sekcji odpowiedzi stackoverflow.com/a/40945821/2914407
Dheeraj

Odpowiedzi:

755

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:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Możesz użyć następującego CSS, aby wyrównać lewy i prawy glif:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo w grze Plunker

zrzut ekranu css

Uwaga : zakłada się, że używasz glifikonów , ale działa równie dobrze z niesamowitymi czcionkami .
Dla FA, po prostu zastąpić .glyphiconz.fa


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-groupelementowi klasy .has-feedbacki ikony klasy .form-control-feedback.

Najprostszym przykładem byłoby coś takiego:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Plusy :

  • Obejmuje obsługę różnych typów formularzy (Basic, Horizontal, Inline)
  • Obejmuje obsługę różnych rozmiarów kontrolnych (domyślne, małe, duże)

Wady :

  • Nie obejmuje obsługi ikon wyrównania do lewej

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-leftdo 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

zrzut ekranu opinii

Sugestia PS frizi dodania pointer-events: none;została dodana do bootstrap

Nie znalazłeś tego, czego szukałeś ? Spróbuj tych podobnych pytań:

Dodatek CSS dla ikon opinii wyrównanych do lewej

KyleMit
źródło
Zobacz moją edycję. Uczyniłem selektor css z focusedInput bardziej wyraźnym, w przeciwnym razie zostanie zastąpiony przez .input-group-addon.
Michel Müller,
@ MichelMüller, nie jestem pewien, czy widzę wartość w sugerowanej edycji. .focusedInputKlasa jest zdefiniowana po .input-group-addontak 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?
KyleMit,
2
Sugeruję dodanie „pointer-events: none;” dla ikon, ponieważ domyślnie zakłócają one ustawianie ostrości na wejściu.
Frizi,
1
@Leandro ! . Po prostu dlatego, że FontAwesome wprowadził przełomowe zmiany w wersji 4. Jeśli chcesz zaktualizować wersję z 3.x do 4.x , musisz zmienić <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.
KyleMit
1
@Leando, możesz przeczytać więcej o nowych konwencjach nazewnictwa w FA 4.0, a także pełny przewodnik migracji od 3.21 do 4
KyleMit
62

Oficjalny sposób. Nie wymaga niestandardowego CSS:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

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

wprowadź opis zdjęcia tutaj

użytkownik
źródło
3
+1 - zdecydowanie miło jest mieć wbudowane podejście do bootstrapu. Chociaż nie robi się tak gorąco przy wyrównaniu do lewej ikon, takich jak pytania, ale zdecydowanie dobre podejście.
KyleMit
1
Dodanie {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!
użytkownik
Tak też pierwotnie myślałem, ale skończysz, tworząc wiele CSS-ów w różnych sytuacjach. Jeśli dodasz etykietę , zobaczysz problemy . W formularzu wbudowanym left:0nie 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órej position:relativeprzydaje się opakowanie .
KyleMit
Powinieneś dodać tę łatkę do bootstrap. Jest to przydatna i często używana funkcja.
użytkownik
43

Oto alternatywa tylko dla CSS. Skonfigurowałem to dla pola wyszukiwania, aby uzyskać efekt podobny do Firefoksa (i setki innych aplikacji).

Oto skrzypce .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}
beardofprey
źródło
+1 świetne rozwiązanie. Zaadaptowałem go do lewej i prawej klasy użyteczności, ale zdecydowanie właściwe podejście
KyleMit
tak, takie proste i po prostu idealne
PeMa
11

Oto jak to zrobiłem, używając tylko domyślnego bootstrap CSS v3.3.1:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

I tak to wygląda:

wprowadź opis zdjęcia tutaj

Garry English
źródło
8

To „oszustwo” będzie działać z efektem ubocznym, że klasa glifikonów zmieni czcionkę dla kontroli wprowadzania.

Skrzypce

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

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

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Prawdopodobnie jeszcze czystsze rozwiązanie:

Skrzypce

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />
Greenbender
źródło
8

Można to zrobić za pomocą klas z oficjalnej wersji bootstrap 3.x, bez żadnego niestandardowego css.

Użyj input-group-addonprzed znacznikiem wejściowym, input-groupa następnie użyj dowolnego z glifikonów, oto kod

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Oto wynik

wprowadź opis zdjęcia tutaj

Aby go dostosować, dodaj kilka linii niestandardowego css do własnego pliku custom.css (w razie potrzeby dostosuj padding)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Po ustawieniu tła input-group-addonprzezroczystego i zerowaniu lewego gradientu znacznika wejściowego wejście będzie wyglądało płynnie. Oto dostosowane wyjście

wprowadź opis zdjęcia tutaj

Oto przykład jsbin

To rozwiąże niestandardowe problemy CSS z nakładaniem się etykiet, wyrównaniem podczas używania input-lgi skupieniem się na problemie z kartami.

Dheeraj
źródło
6

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.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

Mccainz
źródło
6

Jeśli używasz Fontawesome, możesz to zrobić:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Wynik

wprowadź opis zdjęcia tutaj

Pełną listę kodów Unicode można znaleźć w pełnym zestawieniu ikon Font Awesome 4.6.3

Merlin
źródło
5

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

Angel Patel
źródło
świetny „jugad”, ale to naprawdę przydatne, aby ustawić niestandardową ikonę również. dziękuję.
Dhruv Raval
4

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:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Użyj tego CSS ( kompatybilny z przeglądarkami Bootstrap 3.xi Webkit )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

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:

zrzut ekranu

Richard Cotrina
źródło
2

Możesz użyć kodu Unicode HTML

Aby dodać ikonę użytkownika, po prostu dodaj &#xe008;doplaceholder atrybutu lub gdziekolwiek chcesz.

Możesz sprawdzić ten ściągawka .

Przykład:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Nie zapomnij ustawić czcionki wejściowej na Glyphicon, używając następującego kodu:, font-family: 'Glyphicons Halflings', Arialgdzie Arial jest czcionką zwykłego tekstu na wejściu.

Mona Lisa
źródło
1

Mam również jedną decyzję w tej sprawie z Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

Na wejściu mam coś takiego: wprowadź opis zdjęcia tutaj

Vitalii Nesterenko
źródło
1

Testowane z Bootstrap 4.

Weź form-controli dodaj is-validdo 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:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Igor K.
źródło
0

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.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

httpete
źródło
0

Powinieneś być w stanie to zrobić z istniejącymi klasami bootstrap i odrobiną niestandardowej stylizacji.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Edytuj Ikona jest wskazywana przez icon-userklasę. 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

YOOOEE
źródło
Brak odpowiedzi na glificon bootstrap w tej odpowiedzi
Kirby,
@Kirby, ikona jest przywoływana za pośrednictwem klasy icon-user. Ta odpowiedź została napisana w czasie Bootstrap w wersji 2. Możesz zobaczyć odniesienie na następnej stronie - getbootstrap.com/2.3.2/base-css.html#images
YOOOEE