XF 2.2 Use image as icon in editor tool box icons

[JohnLogar]

I would like to utilize an image as an icon in the editor button manager. After reviewing the options, it seems that only Font Awesome icons can be added at the moment. However, I couldn't find any option to incorporate an image instead.

Thanks in advance.

 

[Mr Lucky]

You can with custom bbcodes



And you can control the size in extra.less e.g.

.fr-command img

{height:18px;
width:15px}

 

[JohnLogar]

Thanks it's worked.

 

[JohnLogar]

Is it possible for me to incorporate my own image into the existing functionality of the icon?


I'd like to use a custom image for the arrow here while maintaining its functionality to insert a link.

Thanks

 

[Mr Lucky]

I have done this by submitting the existing. e.g. for the link icon

.fr-btn-grp .fa-link:before

{content:url('https://domain.com/image.png')}

Beware if your image is dark color check its visibility in dark styles

 

[JohnLogar]

Thank you for your response. However, this code will replace all palettes in the editor. I'm looking to replace one specific link with a custom image and another identical link with the same as it by defualt.

 

[Mr Lucky]

However, this code will replace all palettes in the editor.

I've edited my answer to show replacement of the link icon. However are you saying you want two link icons there, one being the your custom image and the other being the default icon?

I can see that's what you have in your mock up image and it had me a bit confused. You also have two insert video buttons ?

 

[JohnLogar]

I've edited my answer to show replacement of the link icon. However are you saying you want two link icons there, one being the your custom image and the other being the default icon?

Yes, exactly. Sorry for confusion. Video icons are just placed for testing purpose.