Replicating Icons with Font Awesome - Solved

Help
#1

Edit: Solved by switching over from JS icons to CSS icons.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

They don’t do a great job of advertising these CDN links.

I’m trying to build a dropdown styled with purescript-bulma, and am observing some odd behavior with font-awesome icons. They replicate every click.

Here’s the relevant code snippet where the icon is created with "fas fa-angle-down".

[ button
    [ class_ BB.button
    , HE.onClick \_ -> Just DropClick
    ]
    [ span_ [ text ddtext ]
    , span [ classes [ BE.icon, BM.isSize B.Small ] ]
        [ i [ css_ "fas fa-angle-down" ] [] ]
    ]
]

I suspect the imported JS script isn’t playing nicely with PS.

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

A workaround is to just omit the icons, or investigate another icon set, but I’m curious to get to the bottom of this issue.

The full component code is here.

You can reproduce this yourself by running:

git clone --branch bulma-fontawesome-dropdown https://github.com/milesfrain/halogen.git dropdown
cd dropdown
npm install # only if you don't already have `parcel` `spago` and `purescript`
npm run build
npm run serve