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

Posted 2023-03-05

【中文标题】在输入占位符文本中使用 Angular fontawesome 图标

【英文标题】：Use Angular fontawesome icon in input placeholder text

【发布时间】：2019-03-14 03:47:45

【问题描述】：

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

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

【参考方案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;  
   

【参考方案2】：

安装官方font-awesome

npm install @fortawesome/fontawesome-free -s

将 font-awesome 导入您的 styles.css

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

现在你可以使用font-awesome normal way和从官方网站搜索图标了。

【讨论】：

感谢@Anjana Thrishakya，但我正在寻找一种方法来使用当前包和 svg 图标