nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

WAB Developer Edition Widget Icon Color

NathanHeickLACSD

What is the best way to change the color of the widget icons in Web AppBuilder? I am creating a custom theme based off of the Jewelry Box Theme and my header is mostly white. So, the white icons aren't visible no matter what the opacity is. I want to find a way to make this work through the theme with CSS or JavaScript.

Najděte více příspěvků označených jako

Accepted answers

All comments

NathanHeickLACSD

I was browsing the Internet and I found a few pages regarding this subject. It's new to me, but it looks doable.

Grant-S-Carroll

Sorry, only other thing I would say, is that regarding IE. We have had some situations where we had to get sys admins to adjust group policy for IE to allow users to download fonts, as they were being blocked by IE settings. If you hit that issue let me know and I can dig out the exact fix for that.

Cheers

Grant-S-Carroll

Hi Nathan

I did look at that, but I think the colour for the svg is embedded in the path of the svg and I couldn't change it. It may be possible but I didn't look in to it too much more as I found the font solution.

Cheers

NathanHeickLACSD

Hi Grant,

That is a smart idea. Is it possible to use an .svg file for the icons in the first place and override them with CSS?

Thanks for the idea!

Grant-S-Carroll

Hi Nathan

I've actually created my icons as fonts as this then gives me complete control over the icons, rather than having them tied to a jpg or png, as I was hitting the same issue that you were with different coloured backgrounds and dealing with contrasts. With css I change the colour of the icon pretty easily and the size if I want as well. Its pretty straight forward to create the font, you just then have to add the css classes in to your theme and then what ever is loading your widgets to apply the right class.

For details on how to create the font, have a look here. Create an Icon Font Using Illustrator & IcoMoon — SitePoint

You do need something that can generate svg's is the only caveat. But the added bonus is that the icon will support a header of any size.

Cheers

NathanHeickLACSD

What I find weird about this CSS is that when I add it and reload the app in WAB, the reload time goes from very fast to slow.

RobertScheitlin__GISP

Nathan,

This JS library has support for IE10 and 11

GitHub - shekhardesigner/InvertImages: Invert White Images using SVG Filters.

NathanHeickLACSD

Yes, it worked in Firefox for me, but I do need IE support. At the least, it makes it easier for me to see the icons while I am developing my custom theme. I don't like my current solution, but it will be to switch out the widget icons once I build the app using the custom theme. I don't like how the theme requires widget modifications to work, but that's the look and feel I want. I tried using a background color with the secondary color in my color scheme, but it looked weird.

Thanks, Robert.

RobertScheitlin__GISP

Nathan,

In most modern browsers there is the invert filter css rule you can use but I think IE is lacking here:

<SPAN class="selector token">.icon-node img</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="property token">-webkit-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">invert</SPAN><SPAN class="punctuation token">(</SPAN>1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
   <SPAN class="property token">filter</SPAN><SPAN class="punctuation token">:</SPAN> DXImageTransform.Microsoft.<SPAN class="token function">BasicImage</SPAN><SPAN class="punctuation token">(</SPAN>invert=<SPAN class="string token">'1'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.