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

Question

我在前端构建中混合使用了 angular、html 和 css，我正在尝试使用 [=24= 更改字体很棒的图标 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>

希望对您有所帮助。

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

How to pass fontAwesome icon to CSS content via data attribute

html

css

angularjs

font-awesome