Question

如何在课堂上更改字体？

2017-05-10

1794

jquery html css font-awesome

我有以下 2 个类：

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

在无效类中我想使用

fa-warning

在有效类中我想使用

fa-check

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 dev tools 中的 CSS 面板复制包含 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');
                    }