[英]font-awesome icon in mat select not showing up as expected
I am working on an angular application in which I have a matInput and I am trying to show an icon in the placeholder of matInput.我正在开发一个 angular 应用程序,其中有一个 matInput,我试图在 matInput 的占位符中显示一个图标。 The font-awesome icon I am trying to use is info-circle My Code
我尝试使用的字体很棒的图标是 info-circle 我的代码
<mat-form-field>
<input matInput
class = "fas"
placeholder= "Default Value"
[(ngModel)]="Value"
style="font-family: Arial, 'Font Awesome'">
</mat-form-field>
Using this code I can see an icon but its not coming as expected.使用此代码我可以看到一个图标,但它没有按预期出现。
I have cross-checked the icon code and its correct.我已经交叉检查了图标代码及其正确性。 I am not sure what is going wrong.
我不确定出了什么问题。
I'm not sure if this works.我不确定这是否有效。 I think you need to add a mat-icon into the form field and mark this as matPrefix:
我认为您需要在表单字段中添加一个 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>
See docu: material.angular.io/components/form-field/api参见文档:material.angular.io/components/form-field/api
You could do this-你可以这样做——
In your HTML-在你的 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>
In your CSS-在你的 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.