Font Awesome Icons – Inline

To make sure I’m on the same page, what code are you using within the title (or wanting to, at least) to insert the icon?

Could this be done with CSS instead? e.g.

.enews .widgetitle:before {
content: '\f413';
}

Cheers!

Specifically I’m trying to use:

<i class="fa fa-envelope"></i>

…before the title text.

It is handy to be able to add this code, while interacting with the eNews UI, as in the “Text To Show Before Form” and “Text To Show After Form” text areas.

That being said, it may be possible to use CSS, though I haven’t figured out how to make it work yet.

I’ve tried the following:

.enews .widgetitle:before {
	 font-family: FontAwesome;
	 content: '\f0e0';
}

…and it doesn’t seem to work. I believe the “f0e0” is correct for the envelope (as I see it at: https://fortawesome.github.io/Font-Awesome/cheatsheet/)

I’ve also tried:

.enews h4.widgetitle::before {
	 font-family: FontAwesome;
	 content: '\f0e0';
}

…which doesn’t seem to be working either.

Example form can be found at: https://bamajr.com/contact/

FYI:

I’m using the code below, on https://bamajr.com/contact/ for adding the same icon, before the word “Contact” in the h1 tag and it works…

.post-1241 header h1.entry-title:before,
.enews h4.widgettitle:before {
	 content: "\f0e0" " ";
	 font-family: FontAwesome;
	 font-style: normal;
	 font-weight: normal;
	 text-decoration: inherit;
}

So i tried simply adding “.enews h4.widgetitle:before” to this, already working code, and it still isn’t displaying.

Ok…

I’m a bone head! LOL ??

It helps if you spell things correctly. the correct code is above, and it does work, but I only had one “t” in “widgettitle” and then when I corrected it, autocorrect ads a space between “widget” and “title”

So yes this works:

.enews h4.widgettitle:before {
	 content: "\f0e0" " ";
	 font-family: FontAwesome;
	 font-style: normal;
	 font-weight: normal;
	 text-decoration: inherit;
}

Although, I still hold that it is likely much easier, for the general “Genesis eNews Extended” plugin, to be able to use something inline. I consider myself to be pretty advanced in CSS, and the missing “t” and autocorrected “widgettitle” took a lot of my time. Would have been way easier to copy/paste:

<i class="fa fa-envelope"></i>

…instead.

Just a thought – thanks for your attention to this, no matter what you decide.

The <i> tag will be accepted for the title field in the next release :).