ASP.NET

Question

<input type="submit" class="btn btn-info w-100" value="Create" />

我有这个图标。

<i class="fas fa-plus"></i>

但是input里面没有放它的地方。绕过这个问题的最佳方法是什么？

Answer 1

您可以使用按钮标签代替输入，其中 Value 属性被标签的内部内容替换。

<button type="submit" class="btn btn-info w-100">
  <i class="fas fa-plus"></i>
  Create
</button>

Answer 2

如果您不想使用 button 并且出于某种原因需要 input，您可以将其包裹在一个容器中以将图标添加为带有您的图标的 pseudoelement在你的按钮上（我使用了很棒的字体，但你可以使用图像作为 background-image ）。但是不要忘记使用pointer-events:none;这样你就可以点击后面的输入了。

<div>
  <input type="submit">
</div>

div {
  display:inline-block;
  position:relative;
}
input { 
padding-right:30px;

}
div:after {
   content: "\f007";
   font: normal normal normal 14px/1 FontAwesome;
   display:block;
   top:5px;
   right:10px;
   position:absolute;
   pointer-events:none;
}

像这样：JSFIDDLE

ASP.NET - <input> 内的图标

ASP.NET - icon inside <input>

html

css

razor

.net-core