mat select中的字体真棒图标未按预期显示答案

【问题标题】：font-awesome icon in mat select not showing up as expectedmat select中的字体真棒图标未按预期显示
【发布时间】：2021-02-01 21:22:12
【问题描述】：

我正在开发一个有 matInput 的 Angular 应用程序，并且我试图在 matInput 的占位符中显示一个图标。我正在尝试使用的字体真棒图标是 info-circle 我的代码

<mat-form-field>
    <input matInput
            class = "fas"
            placeholder= "&#xf05a;Default Value"
            [(ngModel)]="Value"
            style="font-family: Arial, 'Font Awesome'">
</mat-form-field>

使用此代码，我可以看到一个图标，但它没有按预期出现。

我已经交叉检查了图标代码及其正确性。我不确定出了什么问题。

【问题讨论】：

标签： angular angular-material font-awesome mat-input

【解决方案1】：

我不确定这是否有效。我认为您需要在表单字段中添加一个 mat-icon 并将其标记为 matPrefix：

<mat-form-field>
  <mat-label>A Label</mat-label>
  <input matInput placeholder="Placeholder">
  <mat-icon matPrefix>sentiment_very_satisfied</mat-icon>
</mat-form-field>

参见文档：material.angular.io/components/form-field/api

【讨论】：

【解决方案2】：

你可以这样做-

在您的 HTML 中-

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
    <div class="input-wrapper">
       <mat-form-field>
       <input matInput
                class = "fas"                       
                >
      <label for="stuff" class="fa fa-info-circle"></label>
      </mat-form-field>
    </div>

在你的 CSS-

.fa-info-circle{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}

::placeholder {
  text-align: center;
}
.input-wrapper{
  position: relative;
}

【讨论】：