Hoe kan ik een glyphicon toevoegen aan een tekst type invoerveld? Ik wil bijvoorbeeld 'icon-user' in een gebruikersnaam invoer, zoiets als dit:
We'll get to Bootstrap in een tweede, maar hier's de fundamentele CSS concepten in het spel om dit zelf te doen. Zoals baard van prooi wijst op, kunt u dit doen met CSS door absoluut positioneren van het pictogram binnen het invoerelement. Voeg dan aan weerszijden padding toe zodat de tekst niet'overlapt met het icoontje. Dus voor de volgende HTML:
<input type="text" class="form-control" />
Je kunt de volgende CSS gebruiken om glyphs links en rechts uit te lijnen:
/* 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; }
Note: Dit veronderstelt dat je glyphicons gebruikt, maar werkt even goed met font-awesome.
Voor FA, vervang gewoon.glyphicon
door.fa
Met Bootstrap:
Zoals [buffer wijst op][buffer antwoord], kan dit worden bereikt natively binnen Bootstrap door gebruik te maken van [Validatie Staten met Optionele Pictogrammen][validatie staten]. Dit wordt gedaan door het
.form-group
element de class.has-feedback
te geven en het icoontje de class.form-control-feedback
. Het eenvoudigste voorbeeld zou zoiets zijn als dit:**Pros**: * Bevat ondersteuning voor verschillende form types (Basic, Horizontaal, Inline) * Bevat ondersteuning voor verschillende besturingsformaten (Standaard, Klein, Groot) **Cons**: *Ondersteunt niet het *links* uitlijnen van pictogrammen Om de nadelen te overwinnen, heb ik deze [pull-request][pull-request] samengesteld met veranderingen om links uitgelijnde iconen te ondersteunen. Omdat het een relatief grote verandering is, is het uitgesteld tot een toekomstige release, maar als je deze functies **vandaag** nodig hebt, hier'is een eenvoudige implementatie gids: Neem gewoon de [**deze vormveranderingen in css**][formChangs.css] (ook inlined via verborgen stack snippet onderaan)
<input type="text" class="form-control" placeholder="Username" />
***LESS**: als alternatief, als je [bouwt via less][less compiler], hier's de [vormveranderingen in less][formChanges.less] Dan hoef je alleen maar de class `.has-feedback-left` op te nemen in elke groep die de class `.has-feedback` heeft om het icoontje links uit te lijnen. Omdat er veel mogelijke html configuraties zijn over verschillende form types, verschillende control maten, verschillende icoon sets, en verschillende label zichtbaarheid, heb ik een test pagina gemaakt die de juiste set van HTML voor elke permutatie laat zien samen met een live demo. ## [Hier's een demo in Plunker][feedback plunker] [![feedback screenshot]][feedback embed] **P.S.** [frizi's suggestie][frizi] van het toevoegen van `pointer-events: none;` is [toegevoegd aan bootstrap][pointer PR] **Niet gevonden wat je zocht**? Probeer deze soortgelijke vragen: * [Voeg Twitter Bootstrap icoon toe aan Input box][SO1] * [Zet zoek icoon bij textbox bootstrap][SO2] ### Toevoeging CSS voor links uitgelijnde feedback iconen
.has-feedback .form-control {
padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
padding-right: 46px;
}
.has-feedback-left .form-control {
padding-right: 12px;
padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
left: 0;
}
.form-control-feedback {
line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
width: 46px;
height: 46px;
line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
top: 0;
}
@media (min-width: 768px) {
.form-inline .inline-feedback {
position: relative;
display: inline-block;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .has-feedback-left .form-control-feedback {
left: 15px;
}
Hier's een CSS-only alternatief. Ik heb dit opgezet voor een zoekveld om een effect te krijgen dat lijkt op Firefox (& honderd andere apps.)
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;
}
Je zou dit moeten kunnen doen met bestaande bootstrap klassen en een beetje aangepaste styling.
<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>
Edit Het icoon wordt gerefereerd via de icon-user
klasse. Dit antwoord is geschreven ten tijde van Bootstrap versie 2. U kunt de verwijzing zien op de volgende pagina: http://getbootstrap.com/2.3.2/base-css.html#images