代码之家 › 专栏 › 技术社区 › 3x071c

将Fontawesome图标与w3输入字段放在同一行中

w3.css font-awesome row css html

3x071c · 技术社区 · 7 年前

当我在这里遇到这个问题时,我正在制作一个网页。我想用w3创建我的第一个表单。css(不是引导),它工作得非常好。但在多次尝试添加 fa -在我的文本输入栏前面有一个很棒的图标(fa图标的高度与文本输入的高度相匹配,它们都在同一行),我现在问社区里的朋友们-

这是我的密码:

body {
  background-color: black;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<form class="w3-container w3-white">
  <div class="w3-row-padding">
    <div class="w3-col m12">
      <i class="fa fa-envelope-o fa-2x fa-fw" aria-hidden="true"></i><p><input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"></p>
    </div>
  </div>
</form>

我怎样才能让它工作?
像往常一样,感谢您提前给出的所有答案,

2 回复 | 直到 7 年前

Maxwell s.c robertklep 7 年前

body {
  background-color: black;
}
.input-icon{
   float:left;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<form class="w3-container w3-white">
  <div class="w3-row-padding">
    <div class="w3-col m12">
      
<p>
<i class="fa fa-envelope-o fa-2x fa-fw input-icon" aria-hidden="true"></i>
<input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;">
</p>
    </div>
  </div>
</form>

这就成功了。有更好的方法,但这是基础。可以删除或调整扩展效果。您还可以在图标上使用绝对位置,在容器上使用填充。

UÄur Kaya 7 年前

问题是 input 元素继承 display: block .w3-input 班您可以通过简单地为元素提供一个id和设置来覆盖它 display: inline . 添加以下内容:

#inline-input {
    display: inline;
}

<input id = "inline-input" class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;">

<p></p>

推荐文章

Simon · 使用React更改字体可怕图标的颜色

2 年前

Muhammad Asif Mohtesham · 在Font Awesome中,是否可以使用CSS内容属性在“far”和“fas”数据前缀之间切换?[副本]

6 年前

en Peris · 使用JQuery动态更改AwesomeIcon的颜色

6 年前

Pranta Saha · 为什么Font Awesome图标类不同

6 年前

Mav · 如何将图标与固定高度标记的中心对齐[重复]

6 年前

LP13 · 在中心对齐定位标记内的内容

6 年前

Fjott · CSS-居中字体超级图标

6 年前

Sinan Samet · 字体很棒的图标不会显示在Angular 5中

6 年前

Tithos · 品牌FA5图标不工作

6 年前

SuperUberDuper · 字体awesome在加载之前显示方块

6 年前