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

Question

就像标题所说的，美好的一天，我的字体真棒图标在我的文本字段后面。 图标和文本字段都在class =“ contact” div标签内，而CSS都使用contact类以及添加的标签。 任何帮助，将不胜感激，谢谢。

此外，即时通讯使用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;
}

Answer 1

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

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

如果我设置的font-size不适合您的用例，则可以忽略它，我仅在JSFiddle中添加了它以验证对齐。 试试看，让我知道是否适合您。

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

问题描述

1 个解决方案

解决方案1
0 2018-09-28 03:22:11

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

问题描述

1 个解决方案

解决方案1 0 2018-09-28 03:22:11

解决方案1
0 2018-09-28 03:22:11