Frage [Bootstrap] Icon nach inputfeld

[Darknet]

Ich möchte ein icon nach den inputfeld habe Bei mir wird es aber nur untereinander angezeigt,

Benutze Bootstrap und Angular:

#email{
   width: 80%;
}

.icon{
   font-size: 90%;
  
}
<div class="form-group">
                  
                       <label for="email">Email:</label>
                       <input id="email" type="email" class="form-control" ng-model="mail"  ng-change="validateEmail(mail)"><i class="icon ion-ios-play"></i>

 

[Tronjer]

Dafür gibt es bei Bootstrap das .form-inline

 

[SpiceLab]

Ich möchte ein icon nach den inputfeld habe Bei mir wird es aber nur untereinander angezeigt,

Benutze Bootstrap

Entweder geht dem Icon rechts daneben schlichtweg der Platz aus, oder das <i>-Element ist von dir nachträglich mit display:block formatiert worden.

Für gewöhnlich sind Font-Icons, respektive das zugehörige HTML-Element, aber stattdessen mit display:inline-block ausgestattet, um sich problemlos vor oder hinter einem Element, einem Begriff/Wort, einer Zeichenkette einreihen zu lassen, ohne im Textfluss für Unruhe durch unerbetene Zeilenumbrüche zu sorgen.

Siehe beispielsweise "Glyphicons" bei Bootstrap (weil das Framework von dir genutzt wird):

• https://getbootstrap.com/components/#glyphicons-examples
• http://holdirbootstrap.de/komponenten/#glyphicons-examples

Oder auch "Font Awesome":

• http://fontawesome.io/icons/