Font Awesome plugin does not work with P&P Builder

Hi Tom!

Sorry to hear about the problems with the Add Font Awesome plugin, hopefully we will be able to help you get it working as expected!

What version of the Font Awesome plugin is currently installed on your website? Are there any updates available that you can install? If so then it is possible that applying the updates will address the error with Font Awesome.

I set up a testing environment with Post and Page Builder 1.15.2, Post and Page Builder Premium 1.0.5, and Font Awesome 4.0.4 to try to replicate the error, but the button is currently working as expected on my end.

Could you send us the error messages from the console log so our team can take a look at that information and try to figure out where the problem is coming from? The browser console records JavaScript errors that occur when loading page elements and this WordPress guide demonstrates how to access the console in a variety of browsers.

I have the PnPB free and FA versions same as your test.

api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2 <strong>POST</strong> https://www.mysitem.com/wp-json/font-awesome/v1/api?_locale=user 418
_ @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
f @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
b @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
a @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
b.method.r @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
a @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
t @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
y @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
a @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
t @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
a @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
t @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
P @ api-fetch.min.js?ver=134e23b5f88ba06a093f9f92520a98df:2
(anonymous) @ 19-1aba625837ee42373d76.js:1
loadKitMetadata @ 15-2dd973ba30e1c9d41a5d.js:1
preload @ 15-2dd973ba30e1c9d41a5d.js:1
componentWillLoad @ 15-2dd973ba30e1c9d41a5d.js:1
ve @ 12-bcb0b3d592dcd25d5903.js:1
pe @ 12-bcb0b3d592dcd25d5903.js:1
n @ 12-bcb0b3d592dcd25d5903.js:1
et @ 12-bcb0b3d592dcd25d5903.js:1
nt @ 12-bcb0b3d592dcd25d5903.js:1
requestAnimationFrame (async)
raf @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
he @ 12-bcb0b3d592dcd25d5903.js:1
d @ 12-bcb0b3d592dcd25d5903.js:1
xe @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
jmp @ 12-bcb0b3d592dcd25d5903.js:1
connectedCallback @ 12-bcb0b3d592dcd25d5903.js:1
Oe @ react-dom.min.js?ver=16.13.1:131
Oe @ react-dom.min.js?ver=16.13.1:131
Gh @ react-dom.min.js?ver=16.13.1:131
Aj @ react-dom.min.js?ver=16.13.1:158
unstable_runWithPriority @ react.min.js?ver=16.13.1:25
Da @ react-dom.min.js?ver=16.13.1:60
ab @ react-dom.min.js?ver=16.13.1:154
Te @ react-dom.min.js?ver=16.13.1:146
(anonymous) @ react-dom.min.js?ver=16.13.1:61
unstable_runWithPriority @ react.min.js?ver=16.13.1:25
Da @ react-dom.min.js?ver=16.13.1:60
Pg @ react-dom.min.js?ver=16.13.1:61
ha @ react-dom.min.js?ver=16.13.1:60
Ja @ react-dom.min.js?ver=16.13.1:224
ch @ react-dom.min.js?ver=16.13.1:93
(anonymous) @ 11-83caae6e8b60d2829dbb.js:1
E.window.__FontAwesomeOfficialPlugin__openIconChooserModal @ 11-83caae6e8b60d2829dbb.js:1
onclick @ post.php?post=2&action=edit:581
Show 9 more frames

19-1aba625837ee42373d76.js:1 <strong>CAUGHT</strong>: {code: 'invalid_json', message: 'The response is not a valid JSON response.'}
(anonymous) @ 19-1aba625837ee42373d76.js:1
await in (anonymous) (async)
loadKitMetadata @ 15-2dd973ba30e1c9d41a5d.js:1
preload @ 15-2dd973ba30e1c9d41a5d.js:1
componentWillLoad @ 15-2dd973ba30e1c9d41a5d.js:1
ve @ 12-bcb0b3d592dcd25d5903.js:1
pe @ 12-bcb0b3d592dcd25d5903.js:1
n @ 12-bcb0b3d592dcd25d5903.js:1
et @ 12-bcb0b3d592dcd25d5903.js:1
nt @ 12-bcb0b3d592dcd25d5903.js:1
requestAnimationFrame (async)
raf @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
he @ 12-bcb0b3d592dcd25d5903.js:1
d @ 12-bcb0b3d592dcd25d5903.js:1
xe @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
jmp @ 12-bcb0b3d592dcd25d5903.js:1
connectedCallback @ 12-bcb0b3d592dcd25d5903.js:1
Oe @ react-dom.min.js?ver=16.13.1:131
Oe @ react-dom.min.js?ver=16.13.1:131
Gh @ react-dom.min.js?ver=16.13.1:131
Aj @ react-dom.min.js?ver=16.13.1:158
unstable_runWithPriority @ react.min.js?ver=16.13.1:25
Da @ react-dom.min.js?ver=16.13.1:60
ab @ react-dom.min.js?ver=16.13.1:154
Te @ react-dom.min.js?ver=16.13.1:146
(anonymous) @ react-dom.min.js?ver=16.13.1:61
unstable_runWithPriority @ react.min.js?ver=16.13.1:25
Da @ react-dom.min.js?ver=16.13.1:60
Pg @ react-dom.min.js?ver=16.13.1:61
ha @ react-dom.min.js?ver=16.13.1:60
Ja @ react-dom.min.js?ver=16.13.1:224
ch @ react-dom.min.js?ver=16.13.1:93
(anonymous) @ 11-83caae6e8b60d2829dbb.js:1
E.window.__FontAwesomeOfficialPlugin__openIconChooserModal @ 11-83caae6e8b60d2829dbb.js:1
onclick @ post.php?post=2&action=edit:581

15-2dd973ba30e1c9d41a5d.js:1 <strong>Error</strong>: [object Object]
    at m.<anonymous> (19-1aba625837ee42373d76.js:1)
    at async m.loadKitMetadata (15-2dd973ba30e1c9d41a5d.js:1)
(anonymous) @ 15-2dd973ba30e1c9d41a5d.js:1
Promise.catch (async)
componentWillLoad @ 15-2dd973ba30e1c9d41a5d.js:1
ve @ 12-bcb0b3d592dcd25d5903.js:1
pe @ 12-bcb0b3d592dcd25d5903.js:1
n @ 12-bcb0b3d592dcd25d5903.js:1
et @ 12-bcb0b3d592dcd25d5903.js:1
nt @ 12-bcb0b3d592dcd25d5903.js:1
requestAnimationFrame (async)
raf @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
he @ 12-bcb0b3d592dcd25d5903.js:1
d @ 12-bcb0b3d592dcd25d5903.js:1
xe @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
(anonymous) @ 12-bcb0b3d592dcd25d5903.js:1
jmp @ 12-bcb0b3d592dcd25d5903.js:1
connectedCallback @ 12-bcb0b3d592dcd25d5903.js:1
Oe @ react-dom.min.js?ver=16.13.1:131
Oe @ react-dom.min.js?ver=16.13.1:131
Gh @ react-dom.min.js?ver=16.13.1:131
Aj @ react-dom.min.js?ver=16.13.1:158
unstable_runWithPriority @ react.min.js?ver=16.13.1:25
Da @ react-dom.min.js?ver=16.13.1:60
ab @ react-dom.min.js?ver=16.13.1:154
Te @ react-dom.min.js?ver=16.13.1:146
(anonymous) @ react-dom.min.js?ver=16.13.1:61
unstable_runWithPriority @ react.min.js?ver=16.13.1:25
Da @ react-dom.min.js?ver=16.13.1:60
Pg @ react-dom.min.js?ver=16.13.1:61
ha @ react-dom.min.js?ver=16.13.1:60
Ja @ react-dom.min.js?ver=16.13.1:224
ch @ react-dom.min.js?ver=16.13.1:93
(anonymous) @ 11-83caae6e8b60d2829dbb.js:1
E.window.__FontAwesomeOfficialPlugin__openIconChooserModal @ 11-83caae6e8b60d2829dbb.js:1
onclick @ post.php?post=2&action=edit:581

Thank you for sending that information Tom!

The only error I see in that log is referencing loadKitMetadata, which seems like it is used by Font Awesome to load the information in the iframe that appears when clicking the button, however I can’t be too sure.

Have you tried deactivating and reactivating the Font Awesome plugin to see if that has any effect on loading the iframe? Does the Font Awesome interface load as expected if the Post and Page Builder is deactivated?

There could also be a conflict with another plugin installed on your website and you can try temporarily deactivating all other plugins, besides Font Awesome and Post and Page Builder, to test if the loading problems are coming from somewhere else.

Hi Joseph W

Thanks for your time and sorry for possibly wasting it. Whilst the problem does exist, I have several workarounds eg using the Text feature of PnPB to insert HTML of the desired icon into the desired spot. I just do not have the time to pursue it further. Sorry.

Seriously, you guys(‘n’gals?) provide incredible support!

BTW I have a ‘closed-by-PnPB’ thread a month or so back that is far more important and concerns PnPB not showing my theme’s Typography in the editor.

If you have a look at this thread you will see that the issue has been replicated by PnPB.

I’m wondering…
1. Can this post be opened again?
2. Any progress?

PS you can close this thread. Thank you.

Hi Tom,

I am happy to hear that you figured out how to workaround the Font Awesome problem for now and hopefully you will be able to determine the source of the problem another time.

I just checked the Blocky font rendering behavior in the Visual editor and it seems that the other fixes that we made did not address the issue as I had hoped. I created a feature request specifically for this improvement with our developers as well. We use GitHub for tracking features and bugs in our products and you can subscribe to that ticket directly if you want to get updates on the feature’s progress as soon as they occur.

One of the other improvements we are working on with the Post and Page Builder is to allow it to render custom CSS rules that are added through the theme Customizer in our themes, and it seems reasonable to include the 3rd party theme fonts display in the Visual editor fix with that feature.

Please let us know if you have any other questions for us Tom!