Question

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

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

Answer 1

安装官方font-awesome

npm install @fortawesome/fontawesome-free -s

将字体导入到您的styles.css中

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

现在，您可以使用超棒的常规字体并在官方网站上搜索图标。

Answer 2

所以我想出了一种解决方法：代替

match.group(0) # returns string of groups

我在相邻块中添加占位符

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

并添加了其他CSS样式

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

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

2 个答案: