如何覆盖Bulma Carousel轮播组件的导航按钮图标

Bulma Carousel的导航默认图标通过组件内置CSS的伪元素注入，无需修改组件源码，两种方案均可实现自定义替换：

• 方案1：CSS无侵入覆盖（兼容性最好，推荐）
  组件默认导航按钮的固定类名为.slider-navigation-previous（上一张）、.slider-navigation-next（下一张），默认图标绑定在两个元素的::before伪元素上，直接重置伪元素属性即可替换：

  /* 清除默认图标基础样式 */
  .slider .slider-navigation-previous::before,
  .slider .slider-navigation-next::before {
    content: '' !important;
    font-family: inherit !important; /* 清除组件默认的图标字体设置 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  /* 自定义上一张按钮图标 */
  .slider .slider-navigation-previous::before {
    /* 可替换为文本字符、SVG编码、背景图，例：content: url('./left-arrow.svg'); */
    content: '‹';
    font-size: 24px;
    font-weight: 700;
    color: #333;
  }
  
  /* 自定义下一张按钮图标 */
  .slider .slider-navigation-next::before {
    content: '›';
    font-size: 24px;
    font-weight: 700;
    color: #333;
  }
  

  该方案对所有版本的Bulma Carousel生效，不需要调整JS初始化逻辑。

• 方案2：初始化配置传入自定义图标（v4.0+版本支持）
  4.0及以上版本的Bulma Carousel支持初始化时传入自定义图标参数，直接替换默认图标节点：

  // 绑定轮播组件时传入自定义图标配置
  bulmaCarousel.attach('.slider', {
    iconPrevious: '<svg class="custom-prev-icon" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>',
    iconNext: '<svg class="custom-next-icon" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>'
  });
  

  传入的内容支持纯文本、HTML标签、第三方图标字体的标签结构（比如FontAwesome的<i class="fa fa-chevron-left"></i>）。

注意：如果使用低版本组件不支持配置项传参，也可以在组件初始化完成后，直接通过JS获取导航按钮DOM，替换其innerHTML内容实现自定义图标，效果和配置传参一致。

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