如何在课堂上改变字体真棒？

Question

我有以下两个班级：

.invalid {
    padding-left:22px;
    line-height:24px;
    color:#ec3f41;
    class:fa;
}
.valid {
    padding-left:22px;
    line-height:24px;
    color:#3a7d34;
}

在我要使用的无效类中

  

FA-警告

并且在有效的课程中我想使用

  

FA-检查

HTML：

<ul>
        <li id="letter" class="invalid"> At least <strong>one letter</strong></li>
</ul>

JQuery的：

if (pswd.match(/[A-z]/)) {
                        $('#letter').removeClass('invalid').addClass('valid');
                    } else {
                        $('#letter').removeClass('valid').addClass('invalid');
                    }

Answer 1

您可以在有效和无效的类中使用fontawesome字体。 像这样使用

.valid:before{
         content: "\f046";
         font-family: FontAwesome;  
}

.invalid:before{
         content: "\f00d";
         font-family: FontAwesome;  
 }

工作示例：https://codepen.io/sajiddesigner/pen/mmXjbr

对于其他图标，您可以转到http://fontawesome.io/icons/检查要复制的图标，然后从chrome面板中查看chrome dev工具复制行  content: "";

希望这对你有用。

Answer 2

我已经编辑了答案

if (pswd.match(/[A-z]/)) {
                        $('#letter').removeClass('invalid').addClass('valid');
                        $('#letter').addClass('fa-check');
                    } else {
                        $('#letter').removeClass('valid').addClass('invalid');
                        $('#letter').addClass('fa-warning');
                    }