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.
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>
A layer consisting of any Font Awesome icon or logo.
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.
Positioning for a Badge
layer option.