Javascript 字体图标对齐

我正在使用字体可怕的图标作为复选框，但在对齐正方形中的图标时出现问题。它看起来有点难看，而且我在填充和对齐方面做了很多工作，但由于边缘不同，它调整得不好（字体可怕图标有圆形边缘，与我的正方形不匹配）。有人知道如何把它完美地融入我的生活吗

有没有一种方法可以改变图标的圆边（实际上不需要修改字体的源代码？）谢谢

HTML:

---

这是一口井，在

中添加
右侧：0
和
底部：0
。labelForCheckboxClass:before、.labelForCheckboxClass:after

在一定程度上有所帮助

这是您最新的小提琴：

编辑：

对于方形拐角，请尝试以下操作：

.checkboxClass {   
    opacity: 0;
}

.labelForCheckboxClass {
    position: relative;
    font-size: 16px;
    cursor: pointer;
    padding-left: 17px;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid gray;
    background-color: white;   
}

.labelForCheckboxClass:after {
    content: '\f00c';
    color:white;
    background-color: black;
    max-width: 0;
}

.labelForCheckboxClass:before, .labelForCheckboxClass:after {
    font-family: FontAwesome;
    font-size: 17px;
    position: absolute;
    top: 0;
    left: 0;
    height:1.05em;
}

.checkboxClass:checked ~ label:after {
    max-width: 17px; 
    opacity: 1; 
}

试试这个：

.labelForCheckboxClass {
    position: relative;
    font-size: 18px;
    cursor: pointer;
    padding-left: 21.5px;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid gray;
    background-color: white;
    border-radius: 4px;
}

---

问题是您试图用具有圆形边框的图形填充方形框空间。您不能用css修改复选标记的边框，因为字体的形状。。。您没有使用css访问该属性的权限

一个解决办法是使用带有边界半径的正方形，您可以在这里看到：

另一方面，如果您希望保持方框的锐利方形边缘，您可能希望使用复选标记图标（白色），而不使用font awesome中的背景，只需使用javascript将标签的背景颜色切换为（黑色）

这是一个没有去除锐边的版本：

---

感谢您的回复，我也尝试过同样的方法，但仍然注意到一些差距。不是我正在寻找的解决方案。抱歉，我无法将方形边更改为圆形边。您好，用户1527762，上面我发布了一个解决方案，您无需更改边框：您看到我的解决方案了吗？关于so的许多问题都在寻找将圆形销钉安装在方形孔中的解决方案，但没有一个像这样的解决方案。

.checkboxClass {   
    opacity: 0;
}

.labelForCheckboxClass {
    position: relative;
    font-size: 16px;
    cursor: pointer;
    padding-left: 17px;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid gray;
    background-color: white;   
}

.labelForCheckboxClass:after {
    content: '\f00c';
    color:white;
    background-color: black;
    max-width: 0;
}

.labelForCheckboxClass:before, .labelForCheckboxClass:after {
    font-family: FontAwesome;
    font-size: 17px;
    position: absolute;
    top: 0;
    left: 0;
    height:1.05em;
}

.checkboxClass:checked ~ label:after {
    max-width: 17px; 
    opacity: 1; 
}

.labelForCheckboxClass {
    position: relative;
    font-size: 18px;
    cursor: pointer;
    padding-left: 21.5px;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid gray;
    background-color: white;
    border-radius: 4px;
}

.labelForCheckboxClass {
    position: relative;
    font-size: 16px;
    cursor: pointer;
    padding-left: 21.5px;
    padding-bottom: 2px;
    border: 1px solid gray;
    background-color: #FFF;  
    border-radius:4px;
}