Question

我设置了一个复选框。我试图让它显示一个Font Awesome图标。即，检查时<!DOCTYPE html> <html> <body> <script> function changeImg() { if (document.getElementById("cycle").src == "fox.jpg") { document.getElementById("cycle").src = "hawk.jpg"; } else { document.getElementById("cycle").src = "ant.jpg"; } } </script> <button onclick = "changeImg()">change image</button> <img id ="cycle" src ="fox.jpg"/> </body> </html>，未检查时没有。

这是代码：

＆＃13;

fa-link

＆＃13;

input[type="checkbox"] {
    -webkit-appearance: initial;
    appearance: initial;
    outline: 1px solid #A9A9A9;
    width: 25px;
    height: 25px;
    background: #FFFFFF;
    position: relative;
}

input[type="checkbox"]:checked {
    background: #0073C0;
}

input[type="checkbox"]:checked:after {
    content: "\2713";
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    outline: 1px solid #A9A9A9;
}

＆＃13;

它应该是这样的：

我似乎无法解决这个问题。

Answer 1

要使用像这样的Font Awesome图标，您需要将字体系列设置为FontAwesome，您可以在其中设置内容的unicode字符。此外，请确保使用正确的unicode字符（对于链接图标\f0c1）

像这样：

input[type="checkbox"]:checked:after {
    font-family: 'FontAwesome';
    content: "\f0c1";
    ....
}

有关演示，请参阅此fiddle。

复选框 - 用fa-link替换复选标记

1 个答案: