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

时间:2017-11-17 21:20:40

标签: html css

我设置了一个复选框。我试图让它显示一个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;
&#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;
&#13;
&#13;

它应该是这样的:

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

1 个答案:

答案 0 :(得分:2)

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

像这样:

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

有关演示,请参阅此fiddle