Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Brandon Kraft

    (@kraftbj)

    Code Wrangler

    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!

    Thread Starter bamajr

    (@bamajr)

    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: http://fortawesome.github.io/Font-Awesome/cheatsheet/)

    Thread Starter bamajr

    (@bamajr)

    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: http://bamajr.com/contact/

    Thread Starter bamajr

    (@bamajr)

    FYI:

    I’m using the code below, on http://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.

    Thread Starter bamajr

    (@bamajr)

    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.

    Plugin Author Brandon Kraft

    (@kraftbj)

    Code Wrangler

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Font Awesome Icons – Inline’ is closed to new replies.