如何调整Swiper组件中prev/next按钮的图标尺寸？

Swiper的前后切换按钮图标是通过伪元素（::after）生成的，要缩小图标尺寸，你可以通过以下两种方式实现：

方法一：修改伪元素的字体大小 #

直接调整按钮伪元素的font-size，同时可以配合调整按钮容器的尺寸，让整体比例协调：

.swiper .swiper-button-prev,
.swiper .swiper-button-next{
  color: rgb(208, 208, 208);
  background-color: white;
  font-weight: 600;
  /* 缩小按钮容器尺寸，按需调整 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 1; /* 注意：opacity取值范围是0-1，你之前写的10会被解析为1 */
}

/* 调整箭头图标的字体大小 */
.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after{
  font-size: 18px; /* 默认一般是22px左右，按需缩小 */
}

方法二：使用transform缩放图标 #

如果不想修改字体大小，也可以用transform: scale()来缩放伪元素：

.swiper .swiper-button-prev,
.swiper .swiper-button-next{
  color: rgb(208, 208, 208);
  background-color: white;
  font-weight: 600;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 1;
}

/* 缩放箭头图标，0.8表示缩小到原尺寸的80% */
.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after{
  transform: scale(0.8);
}

注意事项 #

• 你之前的opacity: 10是错误的，opacity的合法取值范围是0（完全透明）到1（完全不透明），超过1的值会被浏览器解析为1。
• 如果只调整图标大小而不修改按钮容器尺寸，可能会出现图标和按钮背景的比例不协调，建议两者配合调整。

内容的提问来源于stack exchange，提问作者Babay