Font Awesome on the front-end may conflict with themes

[ziodave]

Please describe the issue here:

We might need to reconsider our font-awesome usage on the front-end to avoid conflicts with themes.

See https://freeyork.org/photography/atlas-of-beauty-photographer-travels-the-world-to-capture-the-beauty-of-500-women-around-the-world/

Please provide additional data about your WordPress install:
[ ] WordPress version: 4.8.3
[ ] WordLift plugin version: 3.15.5

[ziodave]

We use font-awesome in 3 less/CSS files:

• wordlift-faceted-entity-search-widget.less, used by the faceted search shortcode.
• wordlift-ui.less, used by the shortcodes geomap, chord, navigator, and wordlift in general.
• wordlift-reloaded.less, used in admin.

[ziodave]

I found out that the conflicting Font Awesome is loaded by another plugin and it's an older Font Awesome version 4.6.3 while we load 4.7.0.

Therefore I am putting this on-hold, since we want to refactor generally speaking the widgets, this will be solved then.

[cinghaman]

Is there a filter I can add to my functions.php file to block wordlift to load font awesome as it is already loaded through the theme and now it is creating multiple fontawesome calls

[ziodave]

@cinghaman I'll take a look.

[ziodave]

font-awesome is currently referenced by the following css:

• wordlift-reloaded.css:
  • dashboard (wordlift.php).
  • TinyMCE editor (wordlift_editor.php).
• wordlift-ui.css
  • navigator shortcode (class-wordlift-navigator-shortcode.php).
  • chord shortcode (class-wordlift-chord-shortcode.php).
  • geomap shortcode (class-wordlift-geomap-shortcode.php).
  • frontend (wordlift.php).
• wordlift.css: never used
• wordlift-faceted-entity-search-widget:
  • faceted search shortcode (wordlift_shortcode_faceted_search.php).

This is where we use font-awesome:

• initial setup screen (step-1,2,....php and wordlift-admin-setup.php).
• edit.js (loaded by class-wordlift-admin-post-edit-page.php).
• wordlift-carousel.less (.wl-angle.left and .wl-angle.right classes).
• wordlift-reloaded.less (.wl-more, .wl-less, .wl-annotation-label-icon, ..wl-annotation-label-remove-icon, .wl-deselect-widget, ...)
• wordlift-navigator-widget.less
• wordlift-functions.less
• wordlift-label.less
• wordlift-faceted-search-widget.less

[cinghaman]

hmm so there is no easy way I could just add_action > wp_deregister_style fontawesome from your plugin

[ziodave]

Nope, in the medium term I think we should remove the font-awesome dependency.

In the short term we could however split the font loading to a separate style sheet which could then be filtered.

[cinghaman]

That would be great

[ziodave]

I think we should focus on wordlift-ui.css and wordlift-faceted-entity-search-widget.css because these are loaded in the front-end.

[cinghaman]

Yea, it's the front end issue only as it adds additional resource/request and especially in my case I am loading the font-awesome from my assets folder so they get cached properly.
And this additional request adds few microseconds

[ziodave]

Yes, I can totally relate to that. Ok, I'll send an update soon.

[ziodave]

Find here a development version for WordLift 3.19.3. The font-awesome fonts are now loaded in a separate dependency and there's a new filter that you can use to turn that off (only for the front-end), e.g.:

add_filter( 'wl_include_font_awesome', function( $include ) {
 return false;
} );

Travis is running UTs here.

Please remember not to uninstall WordLift before updating otherwise the vocabulary would be deleted.

wordlift-3.19.3-dev.zip