Trying to use FA from plugin using JQuery accordion

[rickbsgu]

I've created a plugin in wordpress that creates a jquery accordion.

It's working fine, however, now I'm trying to add icons using font-awesome, but I don't seem to be able to get the icons to show.

I've added the 'font-awesome' plugin and have verified that icons show up elsewhere simply by specifying the icon class in an empty element (i, div, span). So, I know it is there and working.

I'm instantiating the accordion like so:

let expanderWidgets = $('.article-sidebar-column .expander')
if (expanderWidgets.length > 0) {
  expanderWidgets.accordion({
    icons: {header: "fas fa-caret-right", activeHeader: "fas fa-caret-down"},
    collapsible: true, active: false, heightStyle: "content"
  })

In the inspector, I can see it inserts the 'fa*' classes in a span in the h3 header, so they are there, however their width is 0, so it doesn't look like the icons are getting loaded.

Is there some extra enqueue or other initialization I need to do in the plugin to get the fa icons to show?

(I'd rather use the fa icons than the jquery icons - don't want to load a jq ui theme and I don't want yet another font set in the wp install - it's bloated enough, already)

(I've posted this same question on stackoverflow ) with no response. Can answer there, if you'd rather.

Thanks, rickb

[rickbsgu]

I finally gave up on this and downloaded/installed a jquery ui font package.

[mlwilkerson]

@rickbsgu Sorry to leave you hanging. I've been scrambling on other stuff this past week.

But my hunch is that what's probably tripping up your implementation is the way our i2svg process works, if you're using the SVG/JS version of FA5.

In that case, an <i> that that looks like it has FA5 icon class names is actually replaced with the rendered <svg> element. So if jQuery has a reference to an <i>, it's losing that in the process of the <i> being replaced.

There's a configuration option that cause our i2svg to instead nest the resulting <svg> under the <i> tag. So if you have code that has a reference to the <i>, it is stable. jQuery is one of those areas where this issue has sometimes come up.

There's some documentation on it here.

[rickbsgu]

Thanks for the comment.

Note in the JQuery Accordion instance initializing code, above, you don't have control over what tag contains the icon - JQuery inserts a <span> for the icon, rather than an <i>, I don't know if FA is even seeing it/responding to it. Note also in my comment I've tested it elsewhere (outside the plugin) under other tags, including <i>, and it works fine.

I don't know if Wordpress is adding to the complications because a bunch of other plugins are using FA, or if I'm having issues because I'm trying to use FA from a plugin and I've missed something in the plugin initialization.

Frankly, if I do something like this again, I'll bag WP/JQuery for the front end and just use WP as a backend CMS with VueJS for the front end. WP is a royal PITA for someone who knows how to code.f

[mlwilkerson]

Yeah, I'd have to debug a running reproduction of the issue in order to really figure out what's going on and how to resolve it. I'm willing to take a closer look if you'd like to spin up a CodePen or some such.