字体真棒图标位于文本字段后面答案

【问题标题】：font awesome icons are behind text field字体真棒图标位于文本字段后面
【发布时间】：2019-03-03 23:25:05
【问题描述】：

美好的一天，正如标题所说，我的字体很棒的图标在我的文本字段后面。图标和文本字段都在 class="contact" div 标签内，并且 css 都使用联系人类以及添加标签。任何帮助将不胜感激。

另外，我使用的是 bootstrap 4.0.0

头部标签

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My White Card</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/webmain.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/webmain.js"></script>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

HTML/引导程序

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="contact" class="contact">
  <div class="container">
    <div class="row">
      <h2 class="med_bg">CONTACT US</h2>
      <p class="mv_font">Thank you for your interest in My White Card and our services. Please fill out the form below about your concern or e-mail us at info@mywhitecard.ph</p>

      <div class="contact col-lg-6 col-md-6">

        <div class="input-group input-group-lg">
          <span class="input-group-addon" id="sizing-addon1"><i class="fas fa-user"></i></span>
          <input type="text" class="form-control" aria-describedby="sizing-addon1" placeholder="FULL NAME">
        </div>

        <div class="input-group input-group-lg">
          <span class="input-group-addon" id="sizing-addon1"><i class="fas fa-envelope"></i></span>
          <input type="text" class="form-control" aria-describedby="sizing-addon1" placeholder="EMAIL ADDRESS">
        </div>

        <div class="input-group input-group-lg">
          <span class="input-group-addon" id="sizing-addon1"><i class="fas fa-phone"></i></span>
          <input type="text" class="form-control" aria-describedby="sizing-addon1" placeholder="PHONE NUMBER">
        </div>

      </div>

      <div class="col-lg-6 col-md-6">
        <div class="input-group">
          <textarea name="" id="" cols="80" rows="6" class="form-control"></textarea>
        </div>
        <button class="btn btn-lg med_bg">SUBMIT YOUR MESSAGE</button>
      </div>

    </div>
  </div>
</div>

CSS：

.contact {
  padding: 50px 0 80px;
  text-align: center;
}

.contact p {
  padding-bottom: 80px;
  color: #737373;
}

.contact h2 {
  color: #4c4c4c;
  margin: 20px 0 20px;
}

.contact .input-group {
  margin-bottom: 25px;
}

.contact .form-control {
  border-radius: 0 !important;
}

.contact span {
  border-radius: 0 !important;
}

.contact .btn {
  border-radius: 0;
  width: 100%;
  font-size: 15px;
  background-color: #f08300;
  color: #fff;
}

.contact .btn:hover {
  background-color: #f3a64c;
  color: #fff !important;
}

【问题讨论】：

能否也包含您的 CSS。
HTML 本身不会显示问题，所以我假设它在您的 CSS 中。 jsfiddle.net/rjbh6vo2
更新了div和css，给您带来的不便敬请谅解
我已经用您提供的更新代码更新了小提琴。看来我们仍然缺少一些受影响的代码。我为您添加了很棒的字体 CDN，您能否将您正在使用的库也包含在您的 head 标签中？
更新添加头部标签

标签： html css bootstrap-4

【解决方案1】：

所以看起来input-group-addon 包含字体真棒图标，所以只需在该类上设置填充。

.input-group-addon {
  padding: 5px;
  font-size: 20px;
}

如果我设置的font-size 不适合您的用例，您可以忽略它，我只是添加它来验证JSFiddle 中的对齐方式。试试这个，让我知道这是否适合你。

【讨论】：

很抱歉，但看起来它只是让图标框缩小了更多。最初css没有做任何事情，但是一旦我添加了！important，盒子就变小了。
在那个小提琴中它正在工作，如果你必须声明重要，那么在你的问题中没有显示的地方存在冲突。发布您的所有代码。