How to Style Unicode Character in my Custom CSS Checkbox

Thanks in advance for your help!

I have a custom CSS checkbox and I'm trying to use the unicode square as the checkmark. However, it's not aligning where I want it... It should be in the center of the checkbox. Any way to align it?

Here's my code:

CSS:

input[type=checkbox] {
display: none;
}

label:before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border:2px solid #595c5f;
margin-top:5px;
vertical-align: top;
}

label {
font-size: 18px;
vertical-align: top;
}

input[type=checkbox]:checked + label:before {
content: "\25A0";
font-size:2em;
color: #f05541;
text-align: center;
margin-top:5px;
vertical-align: top;    
}

HTML: Newsletters

A roundup of "what's up" to keep you in the loop on new and featured shops and items.

Thanks again!