How to change a search field to an icon, mobile and tablet?

Asked

Viewed 22 times

1

I would like to create a menu similar to this below, however, in the resolution devices less than 800px, I am unable to change the search field, for the magnifying glass icon.

inserir a descrição da imagem aqui

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="col-6">
    <div class="divLogo input-group" style="float: right;">
      <input class="form-control" type="text" placeholder="Search">
      <!--Como alterar este input para um icone? -->
      <div class="input-group-btn">
        <button class="btn btn-danger" type="submit">BUSCAR</button>
      </div>
    </div>
  </div>
</body>

</html>

No answers

Browser other questions tagged

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