CODEWITHSUNDEEP
javascriptjqueryhtmlcssfont-awesome
user1527762
user1527762

Reputation: 957

Font-awesome icon alignment

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.

Upvotes: 0

Views: 684

Answers (3)

Leo Javier
Leo Javier

Reputation: 1403

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/

Upvotes: 1

Javier Haro
Javier Haro

Reputation: 1255

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

Upvotes: 1

Reda
Reda

Reputation: 1379

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/

Upvotes: 0

Related Questions