Adapt Learning Community: Can I change the hotgraphic icon?

I've been trying to figure out how to change the image that is the hotgraphic icon - the little map type icon.

I'd like to change it for a plain circle or an arrow or similar - any ideas?

Thanks!

Yes it seems I can - finally worked out how to do it with UTF codes :)

Win!

Please share your technique!!

I installed the vanilla.ttf font from src>your theme>fonts into my own Font folder so i can view it in character map. This isn't a must do but makes it easier to pick your new icon.

In the icons.less file in your src>your theme>less folder find .icon-pin:before

.icon-pin:before {

content: "\eXXX";

}

and change the values of XXX to one of the unicodes from the vanilla font found using character map in Windows.

i.e - "\e60f" is the standard map pin, "\e611" is a target style icon, "\e618" is a flag etc etc. You can then change the colours of the pin in the hotgraphic.less file.

Hope that helps!

Helen

Show parent | Reply

Thanks for sharing, Helen!

Show parent | Reply

Thanks Helen.

I tried with a different method to change the hotgraphic icon.

The first two steps are the same as yours, i.e. install the icon fonts on my local dev box and look the icons up in the icon.less file.

instead changing from the icon.less file, I replaced the icon in the /src/components/adapt-contrib-hotgraphic/templates/hotgraphic.hbs template file, e.g. replace the icon-pin to icon-radio-checked.

Show parent | Reply

Fab! Another way to do it it seems! Your method picks an icon from the list of available in icons.less rather than physically changes it which might be better in the long run.

I also played around with the colouring and size in hotgraphic.less :)

Helen

Show parent | Reply