Как добавить значок изображения внутри поля ввода в начальной загрузке?

Question

Я пытаюсь добавить значок изображения в поле ввода текста с помощью начальной загрузки.Я использую значок font-awesome во входном теге для экземпляра, который успешно реализован.

, который вы можете увидеть в приведенном ниже примере:

код для приведенного выше примера:

     <form  id="main-form" method="post" action="index.php">
        <div class="main-form">
                <div class="row" id="single">
                    <div class="col-md-9 shortfieldz">
                           <i class="zmdi zmdi-link"></i>

                             <input type="text" class="form-control main-input"  id='myInput' name="url" value="" placeholder="Paste a long url" /> 

                    </div>
                    <div class="col-md-3 shortbtnz">
                        <input class="btn btn-default btn-block main-button"  type="submit"   name="Shorten" value="Shorten">
                        <!--<button class="btn btn-primary btn-block main-button" id="copyurl" type="button">Copy</button>-->
                    </div>


                </div>
        </div>
      </form>

, но теперь я хочу заменить значок font-awesome на тег img , чтобы добавитьCustmization к изображению:

Вот что я попробовал:

   <form  id="main-form" method="post" action="index.php">
        <div class="main-form">
                <div class="row" id="single">
                    <div class="col-md-9 shortfieldz">
                            <img src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/GG-2.png" class="img-responsive" alt="Responsive image" width="30" height="24" /> 

                             <input type="text" class="form-control main-input"  id='myInput' name="url" value="" placeholder="Paste a long url" /> 

                    </div>
                    <div class="col-md-3 shortbtnz">
                        <input class="btn btn-default btn-block main-button"  type="submit"   name="Shorten" value="Shorten">
                        <!--<button class="btn btn-primary btn-block main-button" id="copyurl" type="button">Copy</button>-->
                    </div>


                </div>
        </div>
      </form>

Вывод:

для справки вы можете увидеть: http://www.bigto.in/

Я ищу решение специально в начальной загрузке.Любое предложение или направление одобрено.

Answer 1

Ссылка, которую вы добавили, показывает вам, как это сделать, если вы просто посмотрите на инспектор.

класс shortfieldz имеет положение, установленное в относительный.Это говорит о том, что он должен позиционировать своих детей относительно границ

#main-form .main-form .shortfieldz {
    padding-right: 0px;
    position: relative; <--
}

Тогда изображение позиционируется абсолютно.Мы используем top и left по отношению к родителю, в этом случае shortfieldz

#main-form .main-form .shortfieldz .zmdi-link {
    position: absolute; <---
    font-size: 28px;
    top: 15px; <---
    left: 25px; <---
    color: #8c8c8c;
    pointer-events: none;
}

Затем вы просто добавляете отступ к входу слева, чтобы учесть изображение поверх него.

#main-form .main-form .main-input {
    padding: 0px 55px; <----
    border-width: 0;
    font-size: 19px;
    font-family: roboto;
    background: #f2f2f2;
    height: 55px;
    color: #151720;
    border-radius: 29px 0px 0px 29px;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
}

Answer 2

Добавление тега class = "zmdi zmdi-link" в тег img и замена тега следующим образом:

 <img src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/GG-2.png" class="img-responsive zmdi zmdi-link" alt="Responsive image " width="30" height="24" />

Окончательный код будет:

<div class="col-md-9 shortfieldz">
                         <img src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/GG-2.png" class="img-responsive zmdi zmdi-link" alt="Responsive image " width="30" height="24" /> 
                                <input type="text" class="form-control main-input"  id='myInput' name="url" value="" placeholder="Paste a long url" /> 

 </div>

после применения html-кода измените некоторые свойства CSS, такие как:

#main-form .main-form .shortfieldz .zmdi-link {
    position: absolute;
    font-size: 28px;
    top: 10px; <----
    left: 25px; 
    color: #8c8c8c;
    border-radius: 20px; <---
    pointer-events: none;

результат:

Answer 3

Использовать группу ввода Bootstrap.Затем добавьте изображение внутри элемента span.https://getbootstrap.com/docs/4.0/components/input-group/

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">
      <img src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/GG-2.png" class="img-responsive" alt="Responsive image" width="30" height="24" />
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Рабочий код ручки ссылка