Audio Player Icons not Showing on front-end when Fontawesome SVG enabled

Support
#1

I appear to have the same problem mentioned in this post: Audio player icons not loading

However, I have disabled the CDN and all caching and the problem still remains (but only on the Audio player, all other icons load as SVG as you’d expect).

The code on the front end appears to differ to that in Cornerstone:
<div class=“mejs-button mejs-playpause-button mejs-play”>
<button type=“button” aria-controls=“mep_0” title=“Play” aria-label=“Play” tabindex=“0”>
</div>
The css is still trying to load the icon onto the ‘before’ pseudo element as a font:
.mejs-button button:before {
content: “\f065”;
display: block;
margin: 0 auto;
font-family: FontAwesome !important;
font-style: normal !important;
font-weight: 400 !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

The problem page is here (you’ll see that all other icons are loading on the page as SVG): https://mollykarloff.co.uk/epk/music/

Is there something else I’m missing here? Why is only the audio player affected?

#2

UPDATE: It turns out that the audio player isn’t rendering the control icons as SVG in cornerstone editor, but loading it as a font like the front end. The difference being that the font is loading in Cornerstone (which it shouldn’t be).

#3

Is there any solution to this? If this were a caching problem then surely even in Cornerstone, the audio player control icons would be rendered as SVG? Both front-end and admin side, they appear to be using regular Fontawesome (except that in admin the icons actually show, presumably because the font files are being loaded when they shouldn’t be).

Is there an answer to this, or is the Audio Player the only element that doesn’t utilise SVG for icons when it’s enabled in global settings? Is this a bug?

#4

How long does it normally take to get a reply to anything here? Pretty sure I’ve got quicker responses before now. Maybe this is a problem nobody cares about?! 🤷

#5

Hello @sguilliard,

Thanks for writing to us.

We are very sorry for the late. To help you with your concerns we need to check your settings, I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please copy your live website to your staging area and share your staging server details in a secure note so we can debug it without breaking your live website. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#6

Hi @prakash_s,

I’ve added the details as a secure note to this post…

#7

UPDATE: After some more investigation, it seems that I can get the player icons to show up if I ‘borrow’ them from Modern Events Calendar, by allowing the ‘mec-font-icons’ stylesheet to be loaded on this page (I’ve normally got it configured to only load on pages where MEC content exists as it’s unnecessary elewhere).

The problem seems to be that the audio player can’t load FontAwesome icons when the site is configured to use FontAwesome SVG because the regular font files are no longer loaded (which is to be expected). To me, it looks as thought the Audio Player element has been overlooked where SVG is configured globally.

The only temporary workaround seems to be to load FontAwesome on pages where the Audio Player element exists. For now, that works by loading the MEC fonts on the page as follows:

if ( is_page(498)) {
	wp_enqueue_style( 'mec-font-icons');
}

That’s obviously not ideal (what if this website stops using MEC and uninstalls it?)

Still waiting to hear if there’s a better solution to this?

#8

Hello @sguilliard,

I checked on my end it seems that that audio or video player doesn’t use the SVG icons. I suspect this could be a bug due to the limitation of the WordPress audio and video player and I have reported it to our development team so that development team can address it in the future. I would request you, please stay tuned for succeeding theme updates.

Thanks for understanding

#9

OK, thanks for the update.

In the meantime, rather than using the MEC script, is there a script tag native to the PRO theme I can enqueue instead? I can’t seem to find where it’s enqued?

#10

My workaround solution:

I’ve created a new stylesheet (my-custom-icons.css) with the following code:
@font-face {
font-family: ‘FontAwesomePro’;
font-style: normal;
font-weight: 900;
font-display: block;
src: url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-solid-900.woff2) format(‘woff2’), url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-solid-900.ttf) format(‘truetype’)
}
@font-face {
font-family: ‘FontAwesome’;
font-style: normal;
font-weight: 900;
font-display: block;
src: url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-solid-900.woff2) format(‘woff2’), url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-solid-900.ttf) format(‘truetype’)
}
@font-face {
font-family: ‘FontAwesomeRegular’;
font-style: normal;
font-weight: 400;
font-display: block;
src: url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-regular-400.woff2) format(‘woff2’), url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-regular-400.ttf) format(‘truetype’)
}
@font-face {
font-family: ‘FontAwesomePro’;
font-style: normal;
font-weight: 400;
font-display: block;
src: url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-regular-400.woff2) format(‘woff2’), url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-regular-400.ttf) format(‘truetype’)
}
@font-face {
font-family: ‘FontAwesomeLight’;
font-style: normal;
font-weight: 300;
font-display: block;
src: url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-light-300.woff2) format(‘woff2’), url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-light-300.ttf) format(‘truetype’)
}
@font-face {
font-family: ‘FontAwesomePro’;
font-style: normal;
font-weight: 300;
font-display: block;
src: url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-light-300.woff2) format(‘woff2’), url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-light-300.ttf) format(‘truetype’)
}
@font-face {
font-family: ‘FontAwesomeBrands’;
font-style: normal;
font-weight: normal;
font-display: block;
src: url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-brands-400.woff2) format(‘woff2’), url(/wp-content/themes/pro/cornerstone/assets/fonts/fa-brands-400.ttf) format(‘truetype’)
}

Then in the functions.php file of the child theme, enque the script either globally or on pages where it’s required. For example:

add_action( 'wp_enqueue_scripts', 'my_fontawesome_fonts', 99 );	
function my_fontawesome_fonts() {
	if( is_page('audio-player-page-name') ) {
		wp_enqueue_style( 'my-fa-icons', get_stylesheet_directory_uri() . 'my-custom-icons.css', false);
	}
}
#11

Hello @sguilliard,

Thanks for the information it will be helpful for the other customers as well.

Thanks

#12

@sguilliard

Thanks for this - I pasted that CSS in the Page CSS within Cornerstone and it fixes the problem. This saves about 1.5Mb of font loading on the home page and elsewhere.

@prakash_s Please get this fixed within Pro, it’s not good at all.

#13

I spoke too soon - it works when editing the page and doesn’t when viewed live.

#14

Instead of the custom CSS you can run do_action('cs_fa_add_webfont_styles'); . We will fix this for the audio element in the next release. Thanks.