Overrding icons in css

Overrding icons in css

by Stuart Mealor -
Number of replies: 3

Firstly just want to say this Mobile App is really good now - thanks for all the hard work by developers !

I'm stuck (or maybe just tired!?) and can't work out how to change the icons in the sidebar.

I'm using a .css file and the colours and text styles are all updating OK.  I've looked at the Docs page (https://docs.moodle.org/dev/Moodle_Mobile_Themes) which indicates to change an icon:

.ion-ionic:before {
   content: "\f3ea";
 }
So I've added the following as a test to change the standard Messages icon (.ion-chatbox) with a different icon ("\f11C) which is just a slightly different icon.  But it doesn't work.  Here's what I've got:

/* Overriding an icon */
.ion-ionic:chatbox {
   content: "\f11c";
 }

/* Messages default .ion-chatbox */
.ion-chatbox {
   color: LightBlue;
}

I must be doing something silly (I'm not a CSS guru) but I can't see what it is ?

Any help gratefully accepted !

Thanks, Stu.

Average of ratings: -
In reply to Stuart Mealor

Re: Overrding icons in css

by Stuart Mealor -

Bump ?

In reply to Stuart Mealor

Re: Overrding icons in css

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Stuart,

let me check this, sorry for the late response we are pretty busy with all the 3.2 release..

Juan

In reply to Stuart Mealor

Re: Overrding icons in css

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Stuart,

is working for me, I did this:


maybe your css file is not correctly being updated?

Regards