How to change arrows size

Question

I am using a Bootstrap datepicker and I changed its size as it was far too small. I used the following css:

.ui-datepicker.ui-widget.ui-widget-content{
    font-size: 45px !important;
    max-height: fit-content !important;
  }

However, now the arrows to change the month are far too small compared to everything else of the widget.

My problem is that I do not manage to change the size. I tried changing the width and height of ui-icon as follows.

.ui-icon{
    width: 32px //double than before
    height: 32px //double than before
}

but it just shows more icons:

Surprisingly, I was not able to find any similar topic.

Any help?

Answer 1

This widget seems to use all icons as a css sprite (link here: https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png) - so all icons are placed in one large image grid and icon is determined by background-position property, which only shows a clipped icon that is required. Changing font-size, background-size won't help. You'd need to use little math and with each width/height change recalculate the scaled coordinates of the sprited icon (correct background-size and background-position to fit the icon precisely. That's imho a waste of time and I'd use some different icon, either an image, or background image or a font icon