Question

请找到代码here

点击按钮后切换课程min。为了显示这个颜色，切换颜色。有没有办法在按钮上添加图标，例如在icon-double-angle-right和icon-double-angle-left之间切换。我链接了Font-Awesome CDN。我只关心最近的浏览器，所以主要是寻找基于伪元素的sol。

Answer 1

您可以使用伪属性实现此目的：

CSS：

btn.min { background:red; }
.btn:after {
  content: attr(data-active-icon);
  font-family: 'FontAwesome';
}
.btn.min:after {
  content: attr(data-inactive-icon);
  font-family: 'FontAwesome';
}

HTML：

<button class="btn" ng-class="{min: min}" ng-click="toggle()" data-active-icon='&#xf104;' data-inactive-icon='&#xf105;'></button>

data-active-icon和data-inactive-icon来自this table。

演示：http://jsbin.com/ariwij/1/edit

我没有在演示中包含bootstrap，但它会很好地集成。

Answer 2

将您的HTML设为：<button class="btn" ng-class="{min: min}" ng-click="toggle()"><span class="arrow-left"></span></button>

然后使用javascript或jquery将<span>上的类替换为切换上的其他类。然后制作两个CSS类规则，一个是左侧箭头的背景图像，一个是右侧箭头，或者您希望实现的风格。

Answer 3

考虑你的按钮是#butt：

$("#butt").click(function(){
     $(this).toggle('red');
})

和CSS：

.red{
 color:red;
}

CSS3切换图标

3 个答案: