真棒字体图标对齐

Question

I'm using Font-awesome icon for a checkbox, but having problem aligning the icon in the square. It kind of looks ugly and how much I try to work with the padding and alignment, it does not adjust well as the edges are different(the font-awesome icon has round edges which does not fit well with my square). Any one has any ideas of how to fit it perfectly in my square?

Is there a way to change the round edges of the icon (without actually having to make changes to the font-awesome source code?) Thank you.

HTML:

<input type="checkbox" name="checkbox" id="checkbox"class="checkboxClass"/>    
<label for="checkbox" class="labelForCheckboxClass"></label> 

CSS:

.checkboxClass {   
    opacity: 0;
}

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

.labelForCheckboxClass:after {
    content: '\f14a';
    max-width: 0;
    overflow: hidden;
    opacity: 0.5;   
    line-height: 20px;
    border-radius: 0;
}

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

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

Here is the JsFiddle.

Answer 1

EDIT:

For square corners try this:

.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; 
}

Try with this:

.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;
}

Answer 2

the problem is that you are trying to fill a square box space with a graphic that has rounded borders. You can't modify the border of the checkmark with css because is the shape of the font... You don't have access to that property with css.

one work around would be to have the square with border-radius I you may see here: http://jsfiddle.net/leojavier/0h7gfdq6/1/

.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;
}

In the other hand if you want to keep the sharp square edges of the box, you may want to use the checkmark icon (white) without the background from font-awesome and just toggle the background color of your label to (black) on click with javascript.

Here is a version without removing the sharp edges:

http://jsfiddle.net/leojavier/0h7gfdq6/3/

Answer 3

Well also adding right: 0 and bottom: 0 to .labelForCheckboxClass:before, .labelForCheckboxClass:after helps to an extent.

Here's your updated fiddle: http://jsfiddle.net/4zjtp/134/