CSS3切换图标

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和​​从this table拍摄。

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

我还没有在演示包括引导，但它会整合就好了。

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; 
}