Как добавить две (SVG) иконки слева и справа в поле поиска как в google.com (иконка лупы и иконка микрофона)

Question

Как добавить две (SVG) картинки слева и справа в поле поиска как в google.com (иконка лупы и иконка микрофона)?

Пытался через background-image в CSS, и то кое-как получилось, но только одну иконку вышло добавить. В HTML с помощью IMG не смог реализовать.

   <div class="search__form">
        <form action="" method="GET">
            <input class="web__search" type="text">
            <!-- <img src="image/search_svg.svg" alt="">
            <img src="image/voice.svg" alt=""> -->
        </form>
    </div>

Answer 1

Вот вам готовое решение. Иконки вставите свои.

img {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
}

.search__form {
  position: relative;
  width: 100%;
}

.web__search {
  display: block;
  width: calc(100% - 80px);
  height: 40px;
  padding: 0 40px;
  border-radius: 40px;
  border: 1px solid rgba(33, 33, 33, 0.2);
  outline: none;
}

.icon-1 {
  position: absolute;
  top: 11px;
  left: 16px;
  width: 20px;
  height: 20px;
}

.icon-2 {
  position: absolute;
  top: 11px;
  right: 16px;
  width: 20px;
  height: 20px;
}

<img alt="Google" height="92" src="https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="272">

<div class="search__form">
  <form action="" method="GET">
    <input class="web__search" type="text" placeholder="Найти в Хухле" name="name" required-placeholder="">
  </form>
  <svg class="icon-1" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
  <svg class="icon-2" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</div>

БЛОГ НА HUSL

Как добавить две (SVG) иконки слева и справа в поле поиска как в google.com (иконка лупы и иконка микрофона)

Ответы (1 шт):