我可以在另一个元素中使用相同的引导程序输入成功的背景检查图像图标来显示成功吗？

编程问答 2022-08-12

问题描述

问题，我的表单（如下图所示）中显示的检查全部相同，除了一个（生日）是我创建的字体超棒检查，而其他检查则是自举输入表单控件'有效的”支票。

问题-是否可以使用引导背景图片的url检查图标进行生日检查，而不是使用字体真棒检查，以便所有检查都相同？如果可以，我该怎么办？

例如替换此字体真棒检查

<div class="birthday">
  <i *ngIf="age >= 18" class="fa fa-check float-right text-yb" style="margin-right: .5rem;" aria-hidden="true"></i>
</div>

有这样的东西

// this is from the debugger when looking at the green check
.form-control.is-valid,.was-validated .form-control:valid {
    border-color: #008489 !important;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='rgb(0,132,137)' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e);
}
<span class="form-control is-valid">check icon here</span>

enter image description here

解决方法

这就是我所做的。

<label [ngClass]="age >= 18 ? 'is-valid' : ''" style="margin-bottom: 0px; color: #212529" class="border-0 form-control pl-0">Birthday</label>
htmljavascripttwitter-bootstrap