Font awesome 5

Quick access to lib - https://fontawesome.com/icons?d=gallery

Normal use case on html:

in the past we said icon: fa fa-chevron-right but now we need to fal fa-chevron-right or fas fa-chevron-right fa fa-chevron-right is still supported but will default to solid version. We prefer to use light version of all icons, except: warning icons and upgrade stars are solid, so use fas fa-star

⚠️ Some of our old icons are not supported - so check before just adding an fal to it.

update the icons array to use the new font awesome icons. font awesome icons are split by font-weight into fal, fas, far. Brands are always fab. If you want to use the new icons, use the whole icon class - eg 'fal-fa-envelope' will translate to fal fa-envelope . In the past we would only say 'envelope-o' it would auto add 'fa fa-envelope-o' . Old apps will have 'envelope-o' stored on db, and it is still supported. Old apps will not change. Ensure you do not break old app support.

Use window.getFaIcon to display icons when supporting both old and new system it checks which icon to display.

window.getFaIcon('envelope-o') 
=> 'fa fa-envelope-o'

window.getFaIcon('fal-fa-envelope') 
=> 'fal fa-envelope'

window.getFaIcon('fas-fa-envelope') 
=> 'fas fa-envelope'

settings side changes Eg: https://gitlab.com/powr/powr/-/merge_requests/4531/diffs#ecf86316b2f7895ed14b503c7fe0172f3c92997b_38_38

const formTriggerIconOptions = _.map(
  [
    - 'envelope-o',
    - 'bullhorn',
    - 'calendar-o',
    - 'comment-o',
    - 'heart-o',
    - 'pencil-square-o',
    - 'phone',
    - 'paper-plane-o',
    - 'question-circle-o',
    - 'star-o',
    - 'file-text-o',
    + 'fal-fa-envelope',
    + 'fal-fa-bullhorn',
    + 'fal-fa-calendar',
    + 'fal-fa-comment',
    + 'fal-fa-heart',
    + 'fal-fa-edit',
    + 'fal-fa-phone',
    + 'fal-fa-paper-plane',
    + 'fal-fa-question-circle',
    + 'fal-fa-star',
    + 'fal-fa-file-alt',
  ],

view side changes Eg: https://gitlab.com/powr/powr/-/merge_requests/4531/diffs#faee73bf7e6e47ed2e342895f44fad3c230ac691_269_269

 - <i class="img-responsive fa fa-{{=m.formTriggerIcon}}"></i>
 + <i class="img-responsive {{=window.getFaIcon(m.formTriggerIcon)}}"></i>