How to move the i element in css?

Asked

Viewed 180 times

0

How could I do so that all icons could be left of each label? They are inside the 'i' element that is inside a div.

inserir a descrição da imagem aqui

HTML

     <h1 class="h3 mb-3 font-weight-normal">FALE CONOSCO</h1>
    <p>Entre em contato pelo formulário abaixo </code></a></p>
  </div>

  <div class="form-label-group">
    <i class="far fa-user-circle fa-2x"></i>
    <input type="name" id="inputName" class="form-control" placeholder="Digite o seu Nome" required autofocus>
    <label for="inputName">Nome</label>

  </div>

  <div class="form-label-group">
    <i class="fas fa-at fa-2x"></i>
    <input type="email" id="inputEmail" class="form-control" placeholder="Digite o seu email" required>
    <label for="inputEmail">Email</label>

  </div>

  <div class="form-label-group">
    <i class="fas fa-phone fa-2x"></i>
    <input type="telefone" id="inputTelefone" class="form-control" placeholder="Digite o seu telefone" required>
    <label for="inputTelefone">Telefone</label>

  </div>

  <div class="form-label-group">
    <i class="fas fa-user-edit fa-2x"></i>
    <input type="assunto" id="inputAssunto" class="form-control" placeholder="Digite o seu email" required>
    <label for="inputEmail">Assunto</label>

  </div>
  <div class="form-group">
    <i class="far fa-envelope fa-2x" ></i>
    <label for="FormControlTextarea">Digite abaixo</label>
    <textarea class="form-control" id="FormControlTextarea1" rows="10"></textarea>

  </div>

CSS

.form-signin {
  width: 100%;
  max-width: 620px;
  padding: 15px;
  margin: auto;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  height: 3.125rem;
  padding: .75rem;
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; 
  line-height: 1.5;
  color: #495057;
  pointer-events: none;
  cursor: text; 
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}
html css

  • Amigo Do you code? Without it you can only answer in the kick...

1 answer

3


Dude if you put position: absolute in label just put a left equivalent to the size of the icon... the result would be as below

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
    .form-signin {
        width: 100%;
        max-width: 620px;
        padding: 15px;
        margin: auto;
    }

    .form-label-group {
        position: relative;
        margin-bottom: 1rem;
    }

    .form-label-group > input,
    .form-label-group > label {
        height: 3.125rem;
        padding: .75rem;
    }

    .form-label-group > label {
        position: absolute;
        top: 0;
        left: 2rem;
        display: block;
        width: 100%;
        margin-bottom: 0;
        line-height: 1.5;
        color: #495057;
        pointer-events: none;
        cursor: text;
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;
    }
</style>
</head>

<body>

    <h1 class="h3 mb-3 font-weight-normal">FALE CONOSCO</h1>
    <p>Entre em contato pelo formulário abaixo </p>

    <div class="form-label-group">
        <i class="far fa-user-circle fa-2x"></i>
        <input type="name" id="inputName" class="form-control" placeholder="Digite o seu Nome" required autofocus>
        <label for="inputName">Nome</label>

    </div>

    <div class="form-label-group">
        <i class="fas fa-at fa-2x"></i>
        <input type="email" id="inputEmail" class="form-control" placeholder="Digite o seu email" required>
        <label for="inputEmail">Email</label>

    </div>

    <div class="form-label-group">
        <i class="fas fa-phone fa-2x"></i>
        <input type="telefone" id="inputTelefone" class="form-control" placeholder="Digite o seu telefone" required>
        <label for="inputTelefone">Telefone</label>

    </div>

    <div class="form-label-group">
        <i class="fas fa-user-edit fa-2x"></i>
        <input type="assunto" id="inputAssunto" class="form-control" placeholder="Digite o seu email" required>
        <label for="inputEmail">Assunto</label>

    </div>
    <div class="form-group">
        <i class="far fa-envelope fa-2x"></i>
        <label for="FormControlTextarea">Digite abaixo</label>
        <textarea class="form-control" id="FormControlTextarea1" rows="10"></textarea>

    </div>




    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.