如何通過數據屬性將fontAwesome圖標傳遞給CSS內容

Question

我正在爲我的前端構建使用angular，html和css的混合，我試圖用角度更改字體超棒圖標onclick。但是，我無法讓它通過unicode到CSS並顯示正確的圖標。它只是打印出unicode。

這裏是我的CSS：

&:before { 
     content: attr(data-icon); 
     font-family: "fontAwesome"; 
     font-size: 2em; 
     position: absolute; 
     left: .65em; 
     top: .25em; 
    } 

我的HTML /角：

<div class="accordion--title" ng-click="showAccordionDetail = !showAccordionDetail" ng-attr-data-icon="{{showAccordionDetail && '\f107' || '\f106' }}"> 

Answer 1

使用ng-class，更容易做到這一點：

<div 
    ng-init="showAccordionDetail = false" 
    class="accordion--title" 
    ng-click="showAccordionDetail = !showAccordionDetail" 
    ng-class="{true:'fa fa-angle-down', false: 'fa fa-angle-right'}[showAccordionDetail]"> 
     click me 
</div> 

Answer 2

由於Enkode的回答，更容易使用ng-class但我做了一些更改，使其更簡單。

<div ng-init="showAccordionDetail = false" 
    class="accordion--title" 
    ng-click="showAccordionDetail = !showAccordionDetail" 
    ng-class="{'fa fa-angle-down': showAccordionDetail, 'fa fa-angle-right': !showAccordionDetail}"> 
    click me 
</div> 

希望這會有所幫助。