Answering my own question, I did the following to get it to work:
in the footer.php I added before the closing body tag –
jQuery(document).ready(function() {
jQuery('input#submit').after('<i class="far fa-comments move-right"></i>');
});
in the functions.php, I have this code –
function isa_comment_reform ($arg) {
$textAndIcon = 'Post Comment ';
$arg['title_reply'] = __('Leave a Comment');
$arg['label_submit'] = __($textAndIcon);
$arg['class_submit'] = 'withIcon';
return $arg;
}
add_filter('comment_form_defaults','isa_comment_reform');
in my header, I included this css( my style sheet is pretty long and was taking forever to save changes) –
<style>
/* overrides */
.move-right {
position: absolute;
margin-left: -35px;
margin-top: 21px;
color: #fff;
z-index: 2000!important;
}
input[type="submit"] {
z-index: 5!important;
}
input[value="Post Comment "] {
padding-right: 50px!important;
}
</style>
And now, I have an icon in the comment Post Comment button.
ETA: Heh, crossed wires — Jinx! Glad you solved it.
————————–
Try assigning __('Post Comment &xf075;', 'your_text_domain')
xf075 in Unicode seems to resolve to a Chinese character. Is that really what you want? You could just copy/paste the actual character without concern for HTML/hex-coding.
The text domain arg technically is optional, but if a proper one is not supplied, translations will not work correctly. If you don’t care about translations, there’s no need to use the __() function.
-
This reply was modified 2 years, 7 months ago by
bcworkz.
Thank you @bcworkz. I will probably translate this theme at some time. the unicode is actually a fontawesome icon. With the code above, I was able to get it to work. Now I can tranlate it in the future with no worries? I sure hope so. I lost a whole day investigating how to put this darn icon in with out it printing the html tag to the screen. Either that or I was getting the blank icon box. Thank you again for your comment.
Any static string can be translated, but assuming the icon wouldn’t change due to chosen language, it doesn’t really belong in a translation string. It would work, but it’s not “proper”. Also, it would require a custom translation, whereas if you left it as a default WP message, the default translations would apply. You could concatenate an icon to the arg after the translation function returns to have an icon yet keep default translations.
In any case, that only applies to unicode icons that you could paste in directly. You cannot include HTML in submit button text because the text is actually a tag attribute, not normal content. If I follow your solution correctly, you’ve added the icon right after the button, then altered the button padding and icon positioning so that it appears to be part of the button. That’s a clever solution! Well done.
My only criticism would be that it’s a shame to need to rely upon jQuery and custom script simply to add an i tag for fontawesome. While the “if it works don’t fix it” maxim could apply, I think it’d be better to add the tags some other way. I think they could be added through the ‘comment_form_submit_field’ filter. Or implement through CSS pseudo-elements. Except you’d be using ::after instead of the ::before used in the linked examples.
It looks like you would need to actually style the enclosing p tag (p.form-submit::after) and not the actual input tag. You still need to fiddle with positioning and padding like you’ve already done. This just avoids the need for jQuery and custom script.
