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

Question

我正在使用angular，html和css的混合物作為我的前端構建，我正在嘗試使用angular更改字體真棒圖標。 但是，我無法讓它將unicode傳遞給css並顯示正確的圖標。 它只打印出unicode。

這是我的CSS：

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

我的html / angular：

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

希望這可以幫助。