I am currently working on enhancing the design of my input text field by incorporating an image icon using Bootstrap. I have successfully used a font-awesome icon within the input tag as an example.
Here is the example of what I have implemented:
https://i.sstatic.net/Dnrs6.png
Below is the code for the above example:
<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>
However, I now intend to replace the font-awesome icon with an img tag to allow for further customization of the image:
Here is my approach:
<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>
Output: https://i.sstatic.net/r0jaU.png
For further details, visit:
I am specifically seeking a solution within Bootstrap. Any guidance or suggestions would be greatly appreciated.