Tengo este código:

<div class="form-group">
<label for="site-title">Site title<span style="color: red;">*</span></label> 
<input class="form-control" type="text" value="" id="site-title" name="" required> <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="mdi mdi-information-outline"></i></a>
</div>

Me gustaría agregar un icono de fuente justo después del campo de entrada, pero actualmente se muestra debajo del campo de entrada.

¿Cómo puedo posicionarlo después del campo?

0
PapT 9 sep. 2018 a las 18:13

3 respuestas

La mejor respuesta

Podrías intentar algo como

.input-container {
display: -ms-flexbox;
display: flex;
width: 100%;
margin-bottom: 15px;
}

.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}

.input-field {
width: 100%;
padding: 10px;
outline: none;
}

Usar CSS es mucho más fácil de alinear elementos en su página. Consulte el tutorial de W3Schools: es simple y fácil de explicar https://www.w3schools.com/howto /howto_css_form_icon.asp

1
Sophia 9 sep. 2018 a las 17:20

Podrías seguir el siguiente ejemplo:

    <div class="form-group">
       <label for="site-title">Site title<span style="color: red;">*</span></label> 
       <div class "form-input">    
         <input class="form-control" type="text" value="" id="site-title" name="" required> 
         <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
            <i class="mdi mdi-information-outline"></i>
         </a>
       </div>
    </div>

Puede agregar el siguiente CSS:

.form-group {
  display: block;
}
.form-group:after,
.form-input:after {
  content: "";
  clear: both;
  dispay: block;
}
.form-group label,
.form-input {
  display: block;
  width: 100%;
}
.form-group label span {
  display: inline-block;
  margin-left: 7px;
}
.form-group .form-control {
  width: 85%;
  float: left;
}
.form-group .form-control a {
 width: 15%;
 display: block;
 float: right;
}

Si está utilizando bootstrap 4, su cuadrícula se compone de flexbox. Puede obtener una guía completa en este enlace flexbox. https://css-tricks.com/snippets/css/a- guía a flexbox

0
Nav Raj Bhattarai 9 sep. 2018 a las 20:50

Tuve tu problema, hice esto. Creo que puedes usarlo desde flex en css y: después de css o puedes usar i tag en span y en div. Si no funciona, puedes usarlo desde flex para ícono y despues en css.

<div class="form-group">
<label for="site-title">Site title<span style="color: red;">*</span></label> 
<input class="form-control" type="text" value="" id="site-title" name="" required> <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><div><span><i class="mdi mdi-information-outline"></i></span></div></a>
</div>
0
tmohammad78 9 sep. 2018 a las 17:22