Error Message Styling

I am trying to have a red “X” appear before the main error message and a green “Check mark” for a successfully submitted form.

I am using font awesome icons, but they are not appearing. Here is the CSS

/* Form Errors */
span .wpcf7-not-valid {
border: 2px solid #CE0000 !important;
}

span .wpcf7-checkbox-not-valid
{
border: 2px solid #CE0000 !important;

}

span.wpcf7-not-valid-tip {
display: none !important;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
color: #CE0000;
background-color: #F8F8F8;
border: 2px solid #CE0000 !important;
padding: 10px;
}

.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
color: #4F8A10;
background-color: #DFF2BF;
border: 0;
padding: 10px;
}
div.wpcf7-mail-sent-ok:before, div.wpcf7-validation-errors:before {
font-family: “FontAwesome” !important;
margin-right: 16px;
vertical-align: middle;
}
div.wpcf7-mail-sent-ok:before {
content:”\f00c” !important;

}
div.wpcf7-validation-errors:before {
content: “\f057” !important;

}

The page I need help with: [log in to see the link]