如何解决垫中的字体真棒图标未按预期显示
我正在开发一个有matInput的角度应用程序,并且试图在matInput的占位符中显示一个图标。我尝试使用的字体超赞图标是信息圈 我的代码
<mat-form-field>
<input matInput
class = "fas"
placeholder= "Default Value"
[(ngModel)]="Value"
style="font-family: Arial,'Font Awesome'">
</mat-form-field>
我已经交叉检查了图标代码及其正确性。我不知道怎么了。
解决方法
我不确定是否可行。我认为您需要在表单字段中添加一个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
,您可以这样做-
在您的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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。