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