Angular ng-class 和 Fontawesome 4 到 5答案

【问题标题】：Angular ng-class and Fontawesome 4 to 5Angular ng-class 和 Fontawesome 4 到 5
【发布时间】：2018-08-03 11:54:35
【问题描述】：

我刚刚按照文档 HERE 将我的应用从 Fontawesome 版本 4 升级到了 5。

一切看起来都不错，除了动态图标之外，它似乎工作正常......

我的应用使用 Angular，而且显示的图标通常是动态的：

ul.to-do-bullets.list-inline(ng-if="isMobile && todos.length > 1")
  li(ng-repeat="todo in todos", ng-click="showTodo($index)")
    i.fa(ng-class="{'fa-circle-o': activeTodo !== $index, 'fa-circle': activeTodo === $index}")

这里的字体加载正常，但是当 to-do 更改时，它不再更新 active 图标...

查看他们的文档我找不到答案......我怎样才能让它像以前一样工作？谢谢

【问题讨论】：

标签： angularjs font-awesome angular-fontawesome

【解决方案1】：

将"fa-circle-o" 更改为"far fa-circle" 和"fa-circle" 更改为"fas fa-circle"

如the migration guide“图标名称更改”部分所述

问候。

【讨论】：

感谢您的回答。由于我使用的是 shims 文件，所以它是相同的...尝试过您的代码和图标看起来仍然正确但不会动态切换...不幸的是问题仍然存在...
您确定您没有更改控制器中的任何内容吗？你能分享一下 showTodo($index) 背后的代码吗？看来您正在使用一些模板来获取最终的 html，您能否通过模板的“已编译”html？
Angular 代码多年来一直运行良好，切换回 FA4 仍然可以正常工作...问题在于新的 FA5 svg 图标转换...必须添加更多内容才能使其正常工作...

【解决方案2】：

对于 Angular，我们创建了一个特定的组件：

https://github.com/FortAwesome/angular-fontawesome

它处于预发布阶段，但我们很乐意帮助对其进行测试并使其成为稳定版本。

如果您不想使用预发布的东西，只需切换到带有 CSS 的 Web 字体，这应该可以解决问题。

【讨论】：