How to add an icon to custom module

Developer Experience
1

Hi,
how can I add a nice looking icon to my custom module?

Anmerkung%202019-08-21%20112421

2

I’d also like to know this. I’ve created a custom module for a client and I’d like to be able to add an icon to it.

3

Please do take a look at our Developer documentation with regards to Extending the Xibo Platform

Thank you

4

Hello @natasha. I have checked the documentation thoroughly with regards to adding icons to widgets, and I’ve been unable to find anything related to it. Can you please provide a more detailed answer? Thanks.

5

I found the solution, mentioned here, although a reference should be added to the docs on the Modules and Widgets section.

Basically, the ModuleWidget class creates an empty CSS class called .module-icon-<module_name>, which you can override with the override.css of your custom theme. I added a content property with the desired unicode icon from FontAwesome, and now I have an icon for the custom module.

1 Like
6

Thanks @adelrodriguez!

@natasha is there a way to add an icon to a custom module without having to create a custom theme and set it there?

Is that possible? I want to distribute an open source module, so that it includes everything needed, including the icon.

7

Thank you, we shall update the docs to make that clearer!

8

You could override .css in the default theme if you do not have a custom theme and do not want to create one.

If you would like to contribute to the project then please do see the following:

https://xibo.org.uk/docs/developer/contributing-to-xibo

Thank you