Question

Trying to edit the flowplayer fullscreen icon

  • 4 August 2022
  • 3 replies
  • 14 views

Userlevel 4
Badge +2

I find the default confusing - top right instead of bottom right, and it’s bidirectional arrows at a 45 degree angle not the expected box-in-a-box in the bottom right of the player.

 

Should be easy enough to change just the icon if not the location.

 

.flowplayer .fp-header .fp-icon {

 

This should specify it but looking at the html and script code in element inspector (opera but should be the same as chrome) I’m not seeing the actual icon type to swap out. SVG? PNG?
 

Thanks all, you’re the best!


3 replies

Userlevel 7

That is because the icon is made by CSS content using :before and :after tags, not an image. See below:

I replaced the content on the before with text aloha. You can change the css to other acceptable symbols using html references, here’s a good reference for some:
https://www.toptal.com/designers/htmlarrows/symbols/

 

Userlevel 4
Badge +2

Can you up the sshot in higher res please sir?

Userlevel 4
Badge +2

like this?

.flowplayer .fp-header .fp-icon ::before {
    content: '\26F6';   padding: 10px; /*alt image: \2750*/
}
 

Reply