Audio player – CSS missing – Replay icon

  • Author
  • #124161

    Not sure if this was by design or an oversight, but the theme CSS is missing the code for displaying the “replay” icon when the Audio shortcode is used for a single audio file.

    I fixed this using Custom CSS as follows:

    .wayfarer-mejs-container.mejs-container .mejs-controls .mejs-replay button::before {
    	content: "\f10d";

    Theme Author

    Interesting, I’m not seeing that icon in development. Did you enable that button in a setting or via a shortcode parameter?

    Thanks for the heads up on this. I’d like to get it fixed if I can replicate things a bit.


    No, the icon is part of the Themicons font, so I just referenced the correct content value for it, as per the CSS I mentioned above. The issue isn’t about whether the icon exists (it does), it’s about the theme’s CSS not including the code necessary to display it.

    To replicate, add a single instance of the [audio] shortcode (with a URL to an audio file, of course). Navigate to the page containing the shortcode, and play the audio file. When the audio file has finished playing, the “play/pause” icons will disappear and should be replaced by the replay icon. However, the replay icon does not appear.


    To add…

    You won’t see this issue if inserting a playlist, as this icon is never visible with playlists. The issue is with single instance [audio] shortcode use.


    Theme Author

    Great, thanks for the additional information. When looking at the source code output by the MediaElements, there didn’t appear to be a button icon for replaying the track. It turns out a the “.mejs-replay” class is added to the play/pause button one the track has finished.

    In some cases there are differences between environments; local development
    vs. production; self-hosted vs It was helpful to know the icon displayed once the track was finished in which case I was able to better debug the issue.

    That said, I just pushed an update to display the play icon when the track has finished playing. Thanks again for the detailed report!


    You’re welcome. Glad it’s sorted. Actually, I had provided the CSS necessary to deal with the .mejs-replay class in my original post. :-)

    Yes, I’m on

The topic ‘Audio player – CSS missing – Replay icon’ is closed to new replies.