我正在尝试使用 Bootstrap 在输入文本字段中添加图像图标。我在成功实现的实例的输入标签中使用了超棒的字体图标。
您可以在下面给出的示例中看到:
上面例子的代码:
<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>
但现在我想用 img 标签替换超棒的字体图标,以便为图像添加自定义:
这是我尝试过的:
<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/
我正在寻找专门在 Bootstrap 中的解决方案。 Apprecheated 任何建议或方向。
最佳答案
使用 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>
工作码笔link
关于html - 如何在 Bootstrap 的输入字段内添加图像图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54698758/