angular - 在输入占位符文本中使用 Angular fontawesome 图标

Question

我在 Angular 6 应用程序中使用官方Font Awesome Angular组件。
但是我找不到将搜索图标作为占位符添加到输入元素的方法，除了在我的应用程序中另外添加 fontawesome 字体，这是不可取的。

  <div class="search-box">
    <input type="search" [(ngModel)]="searchText" placeholder="&#xf002; Search" />
  </div>

Answer 1

所以我想出了这样的解决方法：而不是

  <div class="search-box">
    <input type="search" [(ngModel)]="searchText" placeholder="&#xf002; Search" />
  </div>

我在相邻块中添加占位符

  <div class="search-box">
    <input class="search-box-input" type="search" [(ngModel)]="searchText"/>
    <div class="search-box-placeholder-wrapper">
      <fa-icon [icon]="faSearch" class="search-box-placeholder"></fa-icon>
      <span>&nbsp;Search</span>
    </div>
  </div>

并添加了额外的 CSS 样式

.search-box {   
   position: relative;

  &-placeholder-wrapper {
    pointer-events: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;  
   }

  &-input:focus + .search-box-placeholder-wrapper {
    display: none;  
  } 
}

Answer 2

安装官方字体-awesome

npm install @fortawesome/fontawesome-free -s

将 font-awesome 导入你的 styles.css

@import '@fortawesome/fontawesome-free/css/all.min.css';

现在您可以使用 font-awesome 正常方式并从官方网站搜索图标。