CSS3 切换图标

Question

请找代码here

我切换类(class) 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 ，但它会很好地集成。