devigner devigner - 1 year ago 75
CSS Question

How can I vertically align a font-awesome input checkbox with its label?

I'm using font-awesome in place of default checkboxes and they are not vertically aligned with their labels. How can I either vertically align them or position the label without moving the checkbox itself?


<div class="row">
<input type="checkbox" class="checkbox-green" id="authorized">
<label for="authorized">I am authorized to work in the United States.</label>
<div class="row margin-top-12">
<input type="checkbox" class="checkbox-green" id="drugs">
<label for="drugs">I am not currently using illegal drugs.</label>
<div class="row margin-top-12">
<input type="checkbox" class="checkbox-green" id="felony">
<label for="felony">I have not been convicted of a felony. </label>


@import url(//;

.checkbox-green { display: none; }

.checkbox-green + label:before {
font-family: FontAwesome;
font-size: 34px;
width: 50px;
color: $brand_green;
display: inline-block;
cursor: pointer;
content: "\f096";
.checkbox-green:hover + label:before { color: $brand_green--dark; }
.checkbox-green:checked + label:before { content: "\f046"; }

Codepen at

EDIT: I would like the label and the checkbox to be vertically aligned along their center axes. Adding the style { vertical-align: middle } to the label does not work. Relative positioning of the label moves the text and the checkbox. Changing the font size of the checkbox or the text is not an option.


add vertical-align: middle; to .checkbox-green + label:before that's it