Question

我正在使用angular，html和css的混合物作为我的前端构建，我正在尝试使用angular更改字体真棒图标onclick。但是，我无法让它将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>

希望这有帮助。

如何通过data属性将fontAwesome图标传递给CSS内容

2 个答案: