如何将字体很棒的图标添加到文本区域? [英] How can I add a font-awesome icon to a textarea?

问题描述

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

.text-box {边距:30px 自动；最小宽度:480px；}.文本容器{边距:30px 自动；空白:nowrap；位置:相对；}.icon 文本区域 {位置:绝对；顶部:50%；左边距:17px；边距顶部:17px；z-索引:1；颜色:黑色;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="样式表"/><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>

但对齐已关闭且输入文本垂直/水平居中.

解决方案

这是一个工作示例:

.text-box {边距:30px 自动；最小宽度:480px；}.文本容器{边距:30px 自动；空白:nowrap；位置:相对；}.text-container .text-icon {位置:绝对；顶部:0；左:0；}.text-container textarea {位置:绝对；顶部:0；z-索引:1；颜色:黑色;背景:无；左边距:15px；}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="样式表"/><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>

<块引用>

1. 注意容器内文本区域和图标的绝对位置.
2. 注意 textarea 的背景(我删除了它，所以你会看到它后面的图标).另一种选择是使用 z-index 将图标移到前面.

I am trying to add a font-awesome icon to the top-left corner of a textarea. I tried using the following solution

.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>

but the alignment is off and the input text is vertically/horizontally centered.

解决方案

Here is a working example:

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

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

1. Note the absolute position of both the textarea and the icon inside the container.
2. Note the background of the textarea (i removed it so you will see the icon behind it). Another option is the use z-index to move the icon to the front.

这篇关于如何将字体很棒的图标添加到文本区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！