如何更改箭头大小答案

【问题标题】：How to change arrows size如何更改箭头大小
【发布时间】：2019-07-26 09:57:07
【问题描述】：

我正在使用 Bootstrap 日期选择器，但我更改了它的大小，因为它太小了。我使用了以下css：

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

但是，与小部件的其他所有内容相比，现在更改月份的箭头太小了。

我的问题是我无法更改大小。我尝试如下更改ui-icon 的width 和height。

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

但它只是显示更多图标：

令人惊讶的是，我找不到任何类似的主题。

有什么帮助吗？

【问题讨论】：

这个 SO 问题有什么帮助吗？ >>> stackoverflow.com/questions/38571463/…
并非如此。我已经尝试过了，但我想这是一个不同的问题。我确实看到了图标，只是它们太小了。

标签： css bootstrap-datepicker

【解决方案1】：

这个小部件似乎使用所有图标作为 css 精灵（链接在这里：https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png） - 所以所有图标都放置在一个大图像网格中，图标由 background-position 属性确定，它只显示一个剪裁的图标是必须的。更改 font-size、background-size 无济于事。您需要使用很少的数学运算，并且每次 width/height 更改都会重新计算精灵图标的缩放坐标（正确的 background-size 和 background-position 以精确匹配图标。恕我直言，这是浪费时间，我'会使用一些不同的图标，无论是图像，还是背景图像或字体图标

【讨论】：

这是我认为stackoverflow.com/questions/38571463/… 上的答案会有所帮助的地方 _ 它用 Font-Awesome 替换 UI 图标
感谢您的解释。这正是问题所在。 :) 为了替换图片，一些建议对我不起作用，但this one 做到了。

【解决方案2】：

我认为这里有“字体大小”的问题。从检查模式检查箭头字体大小并增加字体大小。

【讨论】：

箭头是背景图片，不是文字。在这种情况下，更改字体大小没有任何作用。

【解决方案3】：

如果箭头是图像，则可以将图像的宽度设置得更高。

.ui-datepicker.ui-widget.ui-widget-content img{
width: suitable width;
  }

希望能帮助您解答疑问

【讨论】：

我已经尝试过了。为了更清楚地解释它，我对这个问题进行了更多扩展。