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

  • 1
  • Question
  • Updated 3 years ago
  • Answered
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;
}
Photo of Andrew Hess

Andrew Hess

  • 262 Points 250 badge 2x thumb

Posted 3 years ago

  • 1
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
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.

Cheers
(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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 {    
     margin-top:-1px;    
}
.ui-icon-gear:before {
    zoom:150%;
}
Photo of Andrew Hess

Andrew Hess

  • 262 Points 250 badge 2x thumb
That worked perfectly. Thanks!