2

I just upgraded my app from Fontawesome version 4 to 5 following the documentation HERE.

All is looking nice and it seems to work fine except for dynamic icons...

My App use Angular and quite often the icon to show is dynamic:

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}")

Here the fonts are loaded fine but when the to-do change it doesn't update the active icon anymore...

Looking at their documentation I can not find the answer... How can I let it work as it was before? Thanks

Makla
  • 9,899
  • 16
  • 72
  • 142
Ayeye Brazo
  • 3,316
  • 7
  • 34
  • 67

2 Answers2

1

change "fa-circle-o" to "far fa-circle" and "fa-circle" to "fas fa-circle"

as mentionned in the "Icon Name Changes" section if the migration guide

Regards.

Pierre Mallet
  • 7,053
  • 2
  • 19
  • 30
  • Thanks for your answer. It is the same since I'm using the shims file... Tried your code and icons still looks correct but doesn't switch dynamically... issue persist unfortunately... – Ayeye Brazo Feb 23 '18 at 13:05
  • are you sure you didn't change anything in your controller? Can you share the code behind showTodo($index)? And it seems you are using some templating to get your final html, could you past the "compiled" html of your template? – Pierre Mallet Feb 23 '18 at 13:51
  • Angular code is working fine since years and switching back to FA4 it still works... the issue is with the new FA5 svg icon conversion... There must be something more to add to let it work... – Ayeye Brazo Feb 23 '18 at 13:53
1

For Angular we've created a specific component:

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

It's in pre-release stage but we'd love help testing it out and getting it to a stable version.

If you don't want to use pre-release stuff just switch to Web Fonts with CSS and that should clear things up.

Rob Madole
  • 191
  • 2