Question

我正在尝试在textarea的左上角添加一个字体真棒图标。我尝试使用以下解决方案

.text-box {
  margin: 30px auto;
  min-width: 480px;
}

.text-container {
  margin: 30px auto;
  white-space: nowrap;
  position: relative;
}

.icon textarea {
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: black;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-box">
  <div class="text-container">
    <span class="text-icon">
      <i class="fa fa-list-ol"></i>
    </span>
    <textarea rows="3">
          
    </textarea>
  </div>
</div>

但是对齐关闭，输入文本垂直/水平居中。

Answer 1

这是一个有效的例子：

＆＃13;

.text-box {
  margin: 30px auto;
  min-width: 480px;
}

.text-container {
  margin: 30px auto;
  white-space: nowrap;
  position: relative;
}
.text-container .text-icon {
  position: absolute;
  top: 0;
  left: 0;
}
.text-container textarea {
  position: absolute;
  top: 0;
  z-index: 1;
  color: black;
  background: none;
  padding-left: 15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-box">
  <div class="text-container">
    <span class="text-icon">
      <i class="fa fa-list-ol"></i>
    </span>
    <textarea rows="3">This is the text</textarea>
  </div>
</div>

＆＃13;

请注意两者的绝对位置 textarea和容器内的图标。

请注意textarea的背景（我将其移除，因此您将看到它背后的图标）。另一种选择是使用z-index将图标移到前面。

如何在textarea中添加字体真棒图标？

1 个答案: