FontAwesome.Layers

This module enables the layers feature of Font Awesome 5. Layers allows you to stack any number of Font Awesome icons and elements, as well as overlay text or counter badges.

Note that this feature requires using SVG Font Awesome elements.

Entry point

layers : List (IconLayer msg) -> List (LayerOption msg) -> Html msg

Create a layered Font Awesome element.

layers
    [ IconLayer envelope Solid [] [] ]
    [ LayerHasFixedWidth
    , Badge "821" TopLeft []
    ]


-- <span class="fa-layers fa-fw">
--     <i class="fas fa-envelope"></i>
--     <span class="fa-layers-counter fa-layers-top-left">821</i>
-- </span>

Options and layers

type IconLayer msg

= IconLayer Icon Style (List Option) (List (Attribute msg))

A layer consisting of any Font Awesome icon or logo.

type LayerOption msg

= LayerHasFixedWidth

| TextLayer String (List Transform) (List (Attribute msg))

| Badge String BadgePosition (List (Attribute msg))

Other options for a set of layers.

Including the LayerHasFixedWidth option will align all layers.

Including the TextLayer option will place the given text on top of your layers element.

Including the Badge option adds a badge with the given text on top of your element. This is often used to display a counter.

type BadgePosition

= BottomLeft

| BottomRight

| TopLeft

| TopRight

Positioning for a Badge layer option.

gregziegan/elm-font-awesome-5/1.0.1

FontAwesome.Layers

Entry point

Options and layers

Modules