Estoy tratando de mover dos etiquetas <i> dentro de una etiqueta de entrada como parte de un mensaje de éxito y error, pero no sé cómo orientar la etiqueta <i> dentro de mis elementos div. Estoy usando clases de arranque:
.fa-check-circle { position: absolute; top: 10px; right: 10px; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="mb-3 input-control"> <label for="full-name">Full name\User name</label><br> <p>*You can only have on user name per e-mail account</p> <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Full name"> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <small class="error-name">error</small> <br> </div>¿Quieres lograr algo como esto?
.inputDiv { display: flex; border: 1px solid black; width: 50%; } #full-name { width: 80%; border: none; } #full-name:focus{ outline: none; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="mb-3 input-control"> <label for="full-name">Full name\User name</label><br> <p>*You can only have on user name per e-mail account</p> <div class='inputDiv'> <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Full name"> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <small class="error-name">error</small> </div> <br> </div>El selector que necesitas es
.input-control>input[type=text]~i.fas .input-control>input[type=text]~i.fas { position: absolute; transform: translate(-1.5em, .2em); } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="mb-3 input-control"> <label for="full-name">Full name\User name</label><br> <p>*You can only have on user name per e-mail account</p> <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Full name"> <i class="fas fa-check-circle"></i> </div> <div class="mb-3 input-control"> <label for="full-name2">Full name\User name</label><br> <p>*You can only have on user name per e-mail account</p> <input type="text" class="form-control" id="full-name2" name="full-name" placeholder="Full name"> <i class="fas fa-exclamation-circle"></i> <small class="error-name">error</small> </div>