FontAwesome.Layering

Layers are the way to place icons and text visually on top of each other. With this approach you can use more than two icons, use multiple colors, and layer text and/or counters onto an icon.

See the FontAwesome docs for details.

layers : List (Attribute msg) -> List (Html msg) -> Html msg

Convenience function for producing layers of icons.

text : List (Attribute msg) -> String -> Html msg

Add inside your layers element to put text on top of an icon.

textTransformed : List (Attribute msg) -> List Transform -> String -> Html msg

Add inside your layers element to put text on top of an icon, applying the given transforms to it.

counter : List (Attribute msg) -> String -> Html msg

Adds a counter to the top right of your icons. Can be positioned with layersBottomLeft, layersBottomRight, layersTopLeft and the default layersTopRight. Overflow text is truncated with an ellipsis.

There are also some attributes to control positioning of counters.

layersBottomLeft : Attribute msg

Apply the fa-layers-bottom-left class to the element.

layersBottomRight : Attribute msg

Apply the fa-layers-bottom-right class to the element.

layersTopLeft : Attribute msg

Apply the fa-layers-top-left class to the element.

layersTopRight : Attribute msg

Apply the fa-layers-top-right class to the element.

lattyware/elm-fontawesome/7.2.0

FontAwesome.Layering

Modules