How Do I Use FontAwesome?

FontAwesome is the most popular icon set out there and will provide you with a handful of free icons as well as a multitude of premium icons. The standard SAFE template has out-of-the-box support for FontAwesome. You can just start using it in your Client code like so:

open Feliz

Html.i [ prop.className "fas fa-star" ]

This will display a solid star icon.

I am Using the Minimal Template

If you’re using the minimal template, there are a couple of things to do before you can start using FontAwesome. If you don't need the full features of Feliz we suggest using Fable.FontAwesome.Free.

1. The NuGet Package

Add Fable.FontAwesome.Free NuGet Package to the Client project.

See How do I add a NuGet package to the Client?.

2. The CDN Link

Open the index.html file and add the following line to the head element:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

3. Code snippet

open Fable.FontAwesome

Icon.icon [
    Fa.i [ Fa.Solid.Star ] [ ]
]

All Done!

Now you can use FontAwesome in your code