Question

我想在表单输入中包含一个字体很棒的图标，但我遇到了寻找解决方案的问题。在这个网站上看只给出带引导的问题，所以我在没有它的情况下包括一个。我尝试调整this answer中的代码，但对齐已关闭。我该如何解决这个问题？

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.left-addon .fa  { left:  0px;}
.left-addon input  { padding-left:  30px; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="inner-addon left-addon">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>

Answer 1

根据您希望输入的大小，您可以在输入中添加额外的填充：

.left-addon input {
    padding: 8px 5px 8px 30px;
}

或者你可以减少font-awesome图标上的填充：

.inner-addon .fa {
    position: absolute;
    padding: 3px 6px;
    pointer-events: none;
}

＆＃13;

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 3px 6px;
  pointer-events: none;
}
.left-addon .fa  { left:  0px;}
.left-addon input  { padding-left:  30px; }

.inner-addon-tall input {
  padding: 8px 5px 8px 30px;
}
.inner-addon-tall .fa {
  padding: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="inner-addon left-addon">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>
<br/><br/>
<div class="inner-addon left-addon inner-addon-tall">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>

＆＃13;

或者你可以根据你想要的高度来组合它们。

Answer 2

实际上这个Add Bootstrap Glyphicon to Input Box的代码使用bootstrap中的样式表，因此输入的高度不同。简单的方法是将填充值更改为3px。

＆＃13;

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 3px; //Change this
  pointer-events: none;
}
.left-addon .fa  { left:  0px;}
.left-addon input  { padding-left:  30px; }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="inner-addon left-addon">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>

＆＃13;

如何在没有引导程序的情况下将字体真棒图标添加到输入框？

2 个答案: