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

时间：2018-09-28 01:58:06

标签： html css bootstrap-4

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

另外，我正在使用引导程序4.0.0

enter image description here

头部标签

<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;
}

1 个答案:

答案 0 :(得分：0)

所以看起来cannot use body (type []byte) as type io.Reader in argument to csv.NewReader: []byte does not implement io.Reader (missing Read method) 包含字体真棒图标，所以只需在该类上设置填充即可。

input-group-addon

如果我设置的.input-group-addon { padding: 5px; font-size: 20px; } 对您的用例不利，您可以忽略它，我只是添加了此内容以验证JSFiddle中的对齐方式。试试看，让我知道是否适合您。

相关问题
最新问题