将img插入文本字段（html，css）

Question

我有一个文本字段，我想在该文本字段旁边或右边有一个小的facebook图标。

以下是文本字段和fb图标的一些代码。目前我有文本字段，然后fb图标出现在右侧文本字段的正下方。

<div class="row">
  <div class="col-sm-6">
    <h6 class="section-header">NAME:</h6>
    <input class="form-control no-glow test-input" type="text" id="promocode" ng-model="review.promoCode" placeholder="start typing contact name">
    <img src="/img/facebook_btn.png" height="20" width="20" align="left" />
  </div>


  <div class="col-sm-6">
    <h6 class="section-header">E-MAIL ADDRESS:</h6>
    <input class="form-control no-glow" type="text" id="promocode" ng-model="review.promoCode" placeholder="enter email addresses">
  </div>
</div>

我是html和css的新手，所以任何帮助都会受到赞赏。感谢

Answer 1

好的，你可以做一些Bootstrap已经提供的东西，名为input-addons：

＆＃13;

＆＃13;

body {padding: 50px;}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" />
<div class="col-sm-offset-3 col-sm-2">
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-facebook-square"></i></span>
    <input type="text" class="form-control">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

这只需要对如何设置HTML和对齐方式进行一些修改。

<div class="row">
  <div class="col-sm-6">
    <h6 class="section-header">NAME:</h6>
    <img src="/img/facebook_btn.png" height="20" width="20" align="left" />
    <input class="form-control no-glow test-input" type="text" id="promocode" ng-model="review.promoCode" placeholder="start typing contact name">
  </div>


  <div class="col-sm-6">
    <h6 class="section-header">E-MAIL ADDRESS:</h6>
    <input class="form-control no-glow" type="text" id="promocode" ng-model="review.promoCode" placeholder="enter email addresses">
  </div>
</div>

Answer 3

Give the input a class then set the img as a background image and give it some left side padding:

.className{
  background: url("/img/facebook_btn.png") no-repeat scroll 20px 20px;
  padding-left:30px;
}

Answer 4

实际上，this page已经回答了这个问题。 基本上，它应该是这样的：
的 HTML

<!-- This is your code-->
<div class="row">
  <div class="col-sm-6">
    <h6 class="section-header">NAME:</h6>
      <input class="form-control no-glow test-input img-background" type="text" id="promocode" ng-model="review.promoCode" placeholder="start typing contact name">
       <!--Notice the class img-background given to the text field-->
</div>

CSS

input.img-background {
    background: url('/img/facebook_btn.png');
}

这应该为您的文本字段提供Facebook图像背景。