有没有办法将素材图标作为输入背景？答案

【问题标题】：is there a way to place material icon as input background?有没有办法将素材图标作为输入背景？
【发布时间】：2017-03-02 21:17:36
【问题描述】：

有没有办法将素材图标放置在右侧作为背景的输入字段中？

我知道我可以将图像作为输入字段背景，但材料图标不是图像，我认为这些是由字体创建的。

这是我正在尝试的，但没有运气

<input type="search" class="global-search"
       ng-model="vm.searchText"
       ng-keyup="$event.keyCode == 13 ? vm.search() : null"
       placeholder="I can help you to find anything you want!"/>

<a ng-click="vm.search()">
  <i class="material-icons global-search-icon">&#xE8B6;</i> <!--search-->
</a>

图标<i class="material-icons global-search-icon">&#xE8B6;</i>需要是<input type='text'/>的背景图片

【问题讨论】：

标签： angularjs css material-design

【解决方案1】：

您可以将输入和图标包装在一个 div 中：

<div id="divWrapper">       
   <input type="search" class="global-search"
   ng-model="vm.searchText"
   ng-keyup="$event.keyCode == 13 ? vm.search() : null"
   placeholder="I can help you to find anything you want!"/>
   <i class="material-icons global-search-icon">&#xE8B6;</i>
</div>

并添加以下样式：

#divWrapper{
   display:inline;
   position: relative;
}

#divWrapper i {
   position: absolute;
   left: 0;
}

.global-search:focus + i{
   display: none;
}

【讨论】：