gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 01:29:41 25 4
gpt4 key购买 nike

我设置了一个复选框。我想让它显示一个 Font Awesome 图标。即,fa-link 被选中时没有被选中。

代码如下:

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;
}
    <input id="box1" type="checkbox" />

它应该是这样的:

我似乎无法弄清楚这一点。

最佳答案

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

像这样:

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

查看此 fiddle用于演示。

关于html - 复选框 - 用 fa-link 替换复选标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47359456/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com