Icons for custom modules

[ninjar]

Note that the file style.css is inside “custom” folder (custom/themes/SuiteP/css/Dawn). I’ve been working several days after I wrote the change, doing a lot of repair and rebuilds and never lost my changes.

Thank you all. Create a style.css under folder custom/themes/SuiteP/css/Dawn, it works!

[Sigla]

Thank you all.

but i have custom module with name “gg_test”, need write “gg-test”, and it works.

[pgr]

@Sigla, what are you talking about? I don’t understand.

[Sigla]

real module name gg_test, not Working:
.suitepicon-module-gg_test :before{content:"\f1b8"}

if cange to gg-test, (not use _ replace with -) it’s works fine
.suitepicon-module-gg-test:before{content:"\f1b8"}

[CleanSweep]

Does this fix still work? I tried it - put it Dawn, Day, Dusk and Night - nothing.

tried with “_” and with “-” - nada

I’ve tried replacing the .svg files in the custom/themes/default/images folders

Running out of ideas…yes i am doing a Q R&R

[Sigla]

it still works for me.
Try write module name in lower case.
When add code, allways make “quick repair”. Clear browser cashe.

Path to file: …/custom/themes/SuiteP/css/style.css.
For each module I write code in separate lines.
I always chose from existing icons gallery. Trying different choices for icons f1b8, f14a, f149, f1c2.
Gallery example: https://salesagility.github.io/SuiteP-Icon-Font/index.html

[CleanSweep]

Thanks for more ideas - I hadn’t tried the all lower case. Unfortunately it also did not work. Yes, I am doing an QR&R and ctrl+F5

BUT…what did work is having them all on separate lines! Thanks so much - sometimes it’s the simple things. Hopefully this helps others down the road

I’m having issues with the codes (the ones I chose are not the ones showing up - including an icon that is not on that link - so I think they have been updated, but that is a much more manageable situation!)

Thanks!

[robert_sinclair]

@pgr

\f1b8

Thank you it works great, the only thing is that when I go to the https://salesagility.github.io/SuiteP-Icon-Font/index.html and look at the content codes they do not seem to match any longer. For example exploding icon (used for leads) is “\f1a0” on that page, but when I look at the markup I see “\f1a8”, do you know where it’s possible to find the latest most up to date list?

UPDATE: found here https://www.sagebeacon.ai/dnd/themes/SuiteP/css/suitep-base/suitepicon.html

Thank you

[p.konetskiy]

@robert_sinclair

variant 1:

• take the file themes/SuiteP/css/suitep-base/suitepicon.woff
• drop to the service

variant 2:

• open in browser the file themes/SuiteP/css/suitep-base/suitepicon.html

I don’t know how relevant the file of the second variant but the first has the file which using in SuiteCRM directly.

[robert_sinclair]

thank you , i packaged everything into a quick video:

https://www.youtube.com/watch?v=XftsQRe8e5I

[larsschaps]

Thanks for the vid.

But how do I put the css in an installable zip to ship the custom module to a different installation?
And I dont want to overwrite the css on the target, it might have modifications already.
They might even have a custom theme.

[robert_sinclair]

good points, but i’m not 100% sure that that’s doable

[larsschaps]

Hi…
after posting, I investigated further. Suppose you put the style.css in the zip into a subfolder “css”, you can add to the manifest.php following structure.

$installdefs['copy'][] = array (   
  'from' => '<basepath>/css',
  'to' => 'custom/themes/' . 
    SugarThemeRegistry::current() . '/css/' .
    SugarThemeRegistry::getSubThemeDefault(),
),

(Here written in a shorter version, might be better to declared it in the existing “$installdefs” definition.)

The installation routine will but the style.css in the correct folder.

The next problem I see is that you somehow have to empty

cache/themes/

before the style.css will be considered.

[larsschaps]

you can empty

cache/themes

by adding

SugarThemeRegistry::clearAllCaches();

to the manifest.

But the next problem is the browser cache keeping the old css.

[robert_sinclair]

Excellent comments! I added a link to this thread in the vid

[web_elinet]

Hi everyone,
I’ve read the whole post exchange regarding replacing an icon for a custom module in the sub menu, how can I go about replacing the icon with a custom non-suitepicon icon?
Thanks

[gunnicom]

For use of any picture as icon you may use content like this:

.suitepicon-module-accounts:before{content: url("/themes/SuiteR/images/icon_Products.gif") }

[cyborg]

thanks… why is it such a PITA to use custom icons? you have to manually edit the color for each icon for each subtheme too

[rsp]

Icons are not visible.

https://salesagility.github.io/SuiteP-Icon-Font/index.html

Also, not able to open this on browser.

themes/SuiteP/css/suitep-base/suitepicon.html

How to add icon from internet to custom modules in CRM?

[rsp]

I can’t view icons on browser.

https://salesagility.github.io/SuiteP-Icon-Font/index.html