如何通过数据属性将 fontAwesome 图标传递给 CSS 内容
How to pass fontAwesome icon to CSS content via data attribute
我在前端构建中混合使用了 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' }}">
使用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>
作为 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>
希望对您有所帮助。
我在前端构建中混合使用了 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' }}">
使用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>
作为 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>
希望对您有所帮助。