FooTable 自定义切换按钮

Question

FooTable 的小切换按钮来自以下 css

.footable.breakpoint > tbody > tr.footable-detail-show > td > span.footable-toggle:before {
    content: "\e000";
}

.footable.breakpoint > tbody > tr > td > span.footable-toggle:before {
    content: "\e000";
}

不过，我想将其替换为使用以下 CSS 和 HTML

的三角形

.arrow-down {
  width: 0; 
  height: 0; 
  padding: 0;
  margin: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #000;
  position: relative;
  right: -6px !important;
}


 <div class="arrow-down"></div>

我不确定这是否可行，或者如何去做，所以任何建议都很好！

(Link 用于 FooTable 切换图标 http://fooplugins.com/footable/demos/icon-styles.htm)

Answer 1

给指定的选择器添加arrow-down的样式。尝试

.footable.breakpoint > tbody > tr.footable-detail-show > td > span.footable-toggle:before {
  width: 0; 
  height: 0; 
  padding: 0;
  margin: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #000;
  position: relative;
  right: -6px !important;
}

.footable.breakpoint > tbody > tr > td > span.footable-toggle:before {
  width: 0; 
  height: 0; 
  padding: 0;
  margin: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #000;
  position: relative;
  right: -6px !important;
}

FooTable 自定义切换按钮

FooTable Custom Toggle Button

html

css

jquery

footable