Is it possible to increase the size of the queue gear icon using CSS?

I’m being asked to increase the size of the gear icon on the queue.

Paper theme. 

I added the code below to an inline CSS called gearSize, which I called in the CSS class of the queue properties.

.ui-icon .ui-icon-gear  {    height: 20px;
    width: 20px;

Hi Andrew

Just add the following to your CSS:

font-size: 56px;

That should do the trick. Just play around with it and see what fits you best.
If, for some reason this shouldn’t work for you, add an !important statement after the font-size declaration (font-size: 56px !important;) and you should be good to go.


Hi Andrew -

Unfortunately, your css is setting the height and width of the div that contains the icon not the icon itself.

Skuid uses sprites for icon display so you need to use css properties that will effect the image icon itself.  In doing so, it modifies the content property to offset for the icon.  This is where things get a little tricky css wise.  Try the following adjusting as necessary.  Also, depending on which browsers you need to support, you might need to further adjust the selector properties to handle all flavors.

.ui-icon-gear {&nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp;margin-top:-1px; &nbsp; &nbsp;<br>}<br>.ui-icon-gear:before {<br>&nbsp; &nbsp; zoom:150%;<br>}

That worked perfectly. Thanks!