如何改变箭头大小

Question

我正在使用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
}

但它只是显示更多的图标：

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

需要帮助吗？

- J0ANMM

---

这个SO问题中有什么有用的信息吗？>>> https://stackoverflow.com/questions/38571463/bootstrap-navigation-arrows-missing-for-datepicker - inputforcolor

不是的。我已经试过了，但我猜这是另一个问题。我确实看到图标，只是它们太小了。 - J0ANMM

Answer 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以精确地适合图标）。我认为这是浪费时间，我会使用一些不同的图标，无论是图像、背景图像还是字体图标。

- Honza

---

这是我认为在 https://stackoverflow.com/questions/38571463/bootstrap-navigation-arrows-missing-for-datepicker 上的答案将会提供帮助——它使用 Font-Awesome 替换了 UI 图标。 - inputforcolor

谢谢你的解释。那正是问题所在。 :) 为了替换图片，一些建议对我不起作用，但是这个可以。 - J0ANMM

Answer 2

我认为这里是'font-size'的问题。从检查模式中检查箭头的字体大小并增加字体大小。

- Sandeep

---

箭头是背景图像，而不是文本。在这种情况下改变字体大小没有任何作用。 - J0ANMM

Answer 3

如果箭头是一张图片，那么你可以将图片的宽度设置得更高。

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

希望这能帮助你解答你的问题。

- Yang

---

我已经尝试过这个了。我在问题上进行了更详细的扩展，以更清楚地解释它。 - J0ANMM