Icon

The b.Icon constructor creates a container for an icon font.

Modifier	Action
`b.White`	Set color to white
`b.Black`	Set color to black
`b.Light`	Set color to light
`b.Dark`	Set color to dark
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.BlackBis`	Set color to black bis
`b.BlackTer`	Set color to black ter
`b.GreyDarker`	Set color to grey darker
`b.GreyDark`	Set color to grey dark
`b.Grey`	Set color to grey
`b.GreyLight`	Set color to grey light
`b.GreyLigher`	Set color to grey lighter
`b.WhiteTer`	Set color to white ter
`b.WhiteBis`	Set color to white bis
`b.PrimaryLight`	Set color to primary light
`b.LinkLight`	Set color to link light
`b.InfoLight`	Set color to info light
`b.SuccessLight`	Set color to success light
`b.WarningLight`	Set color to warning light
`b.DangerLight`	Set color to danger light
`b.PrimaryDark`	Set color to primary dark
`b.LinkDark`	Set color to link dark
`b.InfoDark`	Set color to info dark
`b.SuccessDark`	Set color to success dark
`b.WarningDark`	Set color to warning dark
`b.DangerDark`	Set color to danger dark
`b.Small`	Set size to small
`b.Medium`	Set size to medium
`b.Large`	Set size to large

The b.IconText constructor creates an icon+text span container and embeds all its non-icon children into spans. The b.FlexIconText constructor creates a flex icon+text span container and embeds all its non-icon children into spans.

Modifier	Action
`b.White`	Set color to white
`b.Black`	Set color to black
`b.Light`	Set color to light
`b.Dark`	Set color to dark
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.BlackBis`	Set color to black bis
`b.BlackTer`	Set color to black ter
`b.GreyDarker`	Set color to grey darker
`b.GreyDark`	Set color to grey dark
`b.Grey`	Set color to grey
`b.GreyLight`	Set color to grey light
`b.GreyLigher`	Set color to grey lighter
`b.WhiteTer`	Set color to white ter
`b.WhiteBis`	Set color to white bis
`b.PrimaryLight`	Set color to primary light
`b.LinkLight`	Set color to link light
`b.InfoLight`	Set color to info light
`b.SuccessLight`	Set color to success light
`b.WarningLight`	Set color to warning light
`b.DangerLight`	Set color to danger light
`b.PrimaryDark`	Set color to primary dark
`b.LinkDark`	Set color to link dark
`b.InfoDark`	Set color to info dark
`b.SuccessDark`	Set color to success dark
`b.WarningDark`	Set color to warning dark
`b.DangerDark`	Set color to danger dark

Font Awesome

Thegithub.com/willoma/bulma-gomponents/fa package provides helpers for Font Awesome icons.

The fa.Icon constructor creates a Font Awesome icon, embedded in an icon container, dealing with appropriately applying children to the icon element or to the span container. The fa.FA constructor creates a Font Awesome icon only, without the icon container. These constructors accept the same modifiers as b.Icon, as well as the Font Awesome-specific values described in following sections.

Child	Action
`fa.OnFA(...any)`	Apply children to the Font Awesome `<i>` element
`fa.OnIcon(...any)`	Apply children to the `<span>` element
Anything else	Apply children to the `<span>` element

First arguments

Font Awesome documentation

The fa.Icon and fa.FA functions require at least two arguments:

The font style, one of fa.Brand, fa.Duotone, fa.Light, fa.SharpLight, fa.Regular, fa.SharpRegular, fa.Solid, fa.SharpSolid, fa.Thin or fa.SharpThin
The icon name, without the fa- prefix (for example, "home" or "spinner")

Styling basics

Font Awesome documentation

Arguments provided to fa.Icon are automatically applied to the  or  element, depending on its nature. If you need to explicitly apply a child to the  element, use fa.FA and include it manually as a child of b.Icon.

Example

Code

e.Span(
	e.Styles{"font-size", "3em", "color": "Tomato"},
	fa.FA(
		fa.Solid, "camera",
	),
),
" ",
e.Span(
	e.Styles{"font-size", "48px", "color": "Dodgerblue"},
	fa.FA(
		fa.Solid, "camera",
	),
),
" ",
e.Span(
	e.Styles{"font-size": "3rem"},
	e.Span(
		e.Styles{"color": "Mediumslateblue"},
		fa.FA(
			fa.Solid, "camera",
		),
	),
)

ResultHTML

<span style="font-size:3em;color:Tomato;"><i class="fa-solid fa-camera"></i></span>

<span style="font-size:48px;color:Dodgerblue;"><i class="fa-solid fa-camera"></i></span>

<span style="font-size:3rem;"><span style="color:Mediumslateblue;"><i class="fa-solid fa-camera"></i></span></span>

Sizing icons

Font Awesome documentation

Modifier	Action
`fa.Size(2)s`	Set size to 2xs
`fa.Size()s`	Set size to xs
`fa.SizeSm`	Set size to sm
`fa.SizeLg`	Set size to lg
`fa.Size()l`	Set size to xl
`fa.Size(2)l`	Set size to 2xl
`fa.Size(0)` to `fa.Size(10)`	Set size to the provided integer value

Fixed width icons

Font Awesome documentation

In order to make all your icons the same width so they can easily vertically align, like in a list or navigation menu, use thefa.FixedWidth modifier.

However, please note that Bulma icons are already square, with a fixed width.

Example

Code

e.Div(fa.FA(fa.Solid, "skating", fa.FixedWidth, e.Styles{"background": "DodgerBlue")), " Skating"},
e.Div(fa.FA(fa.Solid, "skiing", fa.FixedWidth, e.Styles{"background": "SkyBlue")), " Skiing"},
e.Div(fa.FA(fa.Solid, "skiing-nordic", fa.FixedWidth, e.Styles{"background": "DodgerBlue")), " Nordic Skiing"},
e.Div(fa.FA(fa.Solid, "snowboarding", fa.FixedWidth, e.Styles{"background": "SkyBlue")), " Snowboarding"},
e.Div(fa.FA(fa.Solid, "snowplow", fa.FixedWidth, e.Styles{"background": "DodgerBlue")), " Snowplow"},

ResultHTML

Skating

Skiing

Nordic Skiing

Snowboarding

Snowplow

<div><i class="fa-solid fa-skating fa-fw" style="background:DodgerBlue;"></i> Skating</div>
<div><i class="fa-skiing fa-fw fa-solid" style="background:SkyBlue;"></i> Skiing</div>
<div><i class="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue;"></i> Nordic Skiing</div>
<div><i class="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue;"></i> Snowboarding</div>
<div><i class="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue;"></i> Snowplow</div>

Icons in a list

Font Awesome documentation

Use fa.UList and fa.Li to replace default bullets in unordered lists. You can also keep the semantics of an ordered list behind the scenes but use icon bullets visually with fa.OList.

Example

Code

fa.UList(
	fa.Li(fa.Solid, "check-square", "List icons can"),
	fa.Li(fa.Solid, "check-square", "be used to"),
	fa.Li(fa.Solid, "spinner", fa.Spin(fa.Pulse), "replace bullets"),
	fa.Li(fa.Regular, "square", "in lists"),
)

ResultHTML

List icons can
be used to
replace bullets
in lists

<ul class="fa-ul"><li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li><li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be used to</li><li><span class="fa-li"><i class="fa-spin-pulse fa-solid fa-spinner"></i></span>replace bullets</li><li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li></ul>

Example

Code

fa.OList(
	fa.Li(fa.Solid, "check-square", "List icons can"),
	fa.Li(fa.Solid, "check-square", "be used to"),
	fa.Li(fa.Solid, "spinner", fa.Spin(fa.Pulse), "replace bullets"),
	fa.Li(fa.Regular, "square", "in lists"),
)

ResultHTML

List icons can
be used to
replace bullets
in lists

<ol class="fa-ul"><li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li><li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be used to</li><li><span class="fa-li"><i class="fa-solid fa-spinner fa-spin-pulse"></i></span>replace bullets</li><li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li></ol>

Rotate icons

Font Awesome documentation

To arbitrarily rotate and flip icons, use one of the following modifiers on fa.Icon, fa.FA or fa.Li:

fa.Rotate90
fa.Rotate180
fa.Rotate270
fa.FlipHorizontal
fa.FlipVertical
fa.FlipBoth

Example

Code

fa.FA(fa.Solid, "snowboarding"), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate90), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate180), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate270), " ",
fa.FA(fa.Solid, "snowboarding", fa.FlipHorizontal), " ",
fa.FA(fa.Solid, "snowboarding", fa.FlipVertical), " ",
fa.FA(fa.Solid, "snowboarding", fa.FlipBoth)

ResultHTML

<i class="fa-solid fa-snowboarding"></i>

<i class="fa-solid fa-snowboarding fa-rotate-90"></i>

<i class="fa-solid fa-snowboarding fa-rotate-180"></i>

<i class="fa-solid fa-snowboarding fa-rotate-270"></i>

<i class="fa-solid fa-snowboarding fa-flip-horizontal"></i>

<i class="fa-solid fa-snowboarding fa-flip-vertical"></i>

<i class="fa-solid fa-snowboarding fa-flip-both"></i>

In order to apply a custom rotation, use a fa.Rotate value.

Example

Code

fa.FA(fa.Solid, "snowboarding"), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate(45)), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate(-45)), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate(19)), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate(80)), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate(0.25)), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate(-0.25))

ResultHTML

<i class="fa-solid fa-snowboarding"></i>

<i class="fa-solid fa-snowboarding fa-rotate-by"><style>--fa-rotate-angle45deg</style></i>

<i class="fa-solid fa-snowboarding fa-rotate-by"><style>--fa-rotate-angle-45deg</style></i>

<i class="fa-solid fa-snowboarding fa-rotate-by"><style>--fa-rotate-angle19deg</style></i>

<i class="fa-solid fa-snowboarding fa-rotate-by"><style>--fa-rotate-angle80deg</style></i>

<i class="fa-solid fa-snowboarding fa-rotate-by"><style>--fa-rotate-angle0.25deg</style></i>

<i class="fa-rotate-by fa-solid fa-snowboarding"><style>--fa-rotate-angle-0.25deg</style></i>

When combining rotation and flipping, the  is automatically embedded in a  in order to apply all transformations.

Example

Code

fa.FA(fa.Solid, "snowboarding", fa.Rotate90, fa.FlipHorizontal), " ",
fa.FA(fa.Solid, "snowboarding", fa.FlipHorizontal, fa.Rotate90), " ",
fa.FA(fa.Solid, "snowboarding", fa.FlipVertical, fa.Rotate270), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate270, fa.FlipVertical), " ",
fa.FA(fa.Solid, "snowboarding", fa.FlipBoth, fa.Rotate(120)), " ",
fa.FA(fa.Solid, "snowboarding", fa.Rotate(20), fa.FlipBoth), " "

ResultHTML

<span class="fa-rotate-90"><style>displayinline-block</style><i class="fa-solid fa-snowboarding fa-flip-horizontal"></i></span>

<span class="fa-flip-horizontal"><style>displayinline-block</style><i class="fa-snowboarding fa-rotate-90 fa-solid"></i></span>

<span class="fa-flip-vertical"><style>displayinline-block</style><i class="fa-solid fa-snowboarding fa-rotate-270"></i></span>

<span class="fa-rotate-270"><style>displayinline-block</style><i class="fa-solid fa-snowboarding fa-flip-vertical"></i></span>

<span class="fa-flip-both"><style>displayinline-block</style><i class="fa-snowboarding fa-rotate-by fa-solid"><style>--fa-rotate-angle120deg</style></i></span>

<span class="fa-rotate-by"><style>displayinline-block</style><style>--fa-rotate-angle20deg</style><i class="fa-solid fa-snowboarding fa-flip-both"></i></span>

Animating icons

Font Awesome documentation

The icons can be animated using one of the structures implementing fa.Animation. Values are rounded to the 2nd decimal.

Modifier	Action
`fa.Delay(time.Duration)`	Add an initial delay
`fa.DirectionNormal`	Change the animation direction to normal
`fa.DirectionReverse`	Change the animation direction to reverse
`fa.DirectionAlternate`	Change the animation direction to alternate
`fa.DirectionAlternateReverse`	Change the animation direction to alternate reverse
`fa.Duration(time.Duration)`	Set duration
`fa.IterationCount(float64)`	Set number of iterations
`fa.TimingEase`	Set animation progress timing to ease
`fa.TimingLinear`	Set animation progress timing to linear
`fa.TimingEaseIn`	Set animation progress timing to ease-in
`fa.TimingEaseOut`	Set animation progress timing to ease-out
`fa.TimingEaseInOut`	Set animation progress timing to ease-in-out
`fa.TimingStepStart`	Set animation progress timing to step-start
`fa.TimingStepEnd`	Set animation progress timing to step-end

The fa.Beat animation type scales an icon up or down. Additionally to the common attributes, it uses the fa.MaxScale(float64) attribute to set the maximum value the icon will scale.

Example

Code

fa.FA(fa.Solid, "circle-plus", fa.Beat()), " ",
fa.FA(fa.Solid, "heart", fa.Beat()), " ",
fa.FA(fa.Solid, "heart", fa.Beat(fa.Duration(500*time.Millisecond))), " ",
fa.FA(fa.Solid, "heart", fa.Beat(fa.Duration(2*time.Second))), " ",
fa.FA(fa.Solid, "heart", fa.Beat(fa.MaxScale(2))),

ResultHTML

<i class="fa-solid fa-circle-plus fa-beat"></i>

<i class="fa-solid fa-heart fa-beat"></i>

<i class="fa-heart fa-beat fa-solid"></i>

<i class="fa-solid fa-heart fa-beat"></i>

<i class="fa-solid fa-heart fa-beat"><style>--fa-beat-scale2.00</style></i>

The fa.Fade animation type fades an icon in and out. Additionally to the common attributes, it uses the fa.MinOpacity(float64) attribute to set the lowest opacity the icon will fade to and from.

Example

Code

fa.FA(fa.Solid, "triangle-exclamation", fa.Fade(), " ",
fa.FA(fa.Solid, "skull-crossbones", fa.Fade()), " ",
fa.FA(fa.Solid, "desktop", fa.Fade()), " ",
fa.FA(fa.Solid, "i-cursor", fa.Fade(fa.Duration(2 * time.Second), fa.MinOpacity(0.6)))

ResultHTML

<i class="fa-solid fa-triangle-exclamation fa-fade"></i>

<i class="fa-solid fa-skull-crossbones fa-fade"></i>

<i class="fa-desktop fa-fade fa-solid"></i>

<i class="fa-solid fa-i-cursor fa-fade"><style>--fa-fade-opacity0.60</style></i>

The fa.BeatFade animation type scales and pulses an icon in and out. Additionally to the common attributes, it uses the fa.MaxScale(float64)and fa.MinOpacity(float64) attributes.

Example

Code

fa.FA(fa.Solid, "triangle-exclamation", fa.BeatFade()), " ",
fa.FA(fa.Solid, "square-xmark", fa.BeatFade()), " ",
fa.FA(fa.Solid, "poo-bolt", fa.BeatFade(fa.MinOpacity(0.1), fa.MaxScale(1.25))), " ",
fa.FA(fa.Solid, "circle-info", fa.BeatFade(fa.MinOpacity(0.67), fa.MaxScale(1.075)))

ResultHTML

<i class="fa-solid fa-triangle-exclamation fa-beat-fade"></i>

<i class="fa-solid fa-square-xmark fa-beat-fade"></i>

<i class="fa-solid fa-poo-bolt fa-beat-fade"><style>--fa-beat-fade-scale1.25</style><style>--fa-beat-fade-opacity0.10</style></i>

<i class="fa-beat-fade fa-solid fa-circle-info"><style>--fa-beat-fade-scale1.07</style><style>--fa-beat-fade-opacity0.67</style></i>

The fa.Bounce animation type bounces an icon up and down. Additionally to the common attributes, it uses the following attributes:

fa.Rebound(float64)Set the amount of rebound when landing after the jump: fa.Height(float64)Set the max height to jump when bouncing
fa.StartScaleX(float64)Set the icon's horizontal distortion (squish) when starting to bounce: fa.StartScaleY(float64)Set the icon's vertical distortion (squish) when starting to bounce
fa.JumpScaleX(float64)Set the icon's horizontal distortion (squish) at the top of the jump: fa.JumpScaleY(float64)Set the icon's vertical distortion (squish) at the top of the jump
fa.LandScaleX(float64)Set the icon's horizontal distortion (squish) when landing after the jump: fa.LandScaleY(float64)Set the icon's vertical distortion (squish) when landing after the jump

Example

Code

fa.FA(fa.Solid, "basketball", fa.Bounce()), " ",
fa.FA(fa.Solid, "volleyball", fa.Bounce()), " ",
fa.FA(fa.Solid, "frog", fa.Bounce(fa.StartScaleX(1), fa.StartScaleY(1), fa.JumpScaleX(1), fa.JumpScaleY(1), fa.LandScaleX(1), fa.LandScaleY(1))), " ",
fa.FA(fa.Solid, "envelope", fa.Bounce(fa.StartScaleX(1), fa.StartScaleY(1), fa.JumpScaleX(1), fa.JumpScaleY(1), fa.LandScaleX(1), fa.LandScaleY(1), fa.Rebound(0)))

ResultHTML

<i class="fa-solid fa-basketball fa-bounce"></i>

<i class="fa-solid fa-volleyball fa-bounce"></i>

<i class="fa-frog fa-bounce fa-solid"><style>--fa-bounce-start-scale-x1.00</style><style>--fa-bounce-start-scale-y1.00</style><style>--fa-bounce-jump-scale-x1.00</style><style>--fa-bounce-jump-scale-y1.00</style><style>--fa-bounce-land-scale-x1.00</style><style>--fa-bounce-land-scale-y1.00</style></i>

<i class="fa-solid fa-envelope fa-bounce"><style>--fa-bounce-rebound0</style><style>--fa-bounce-start-scale-x1.00</style><style>--fa-bounce-start-scale-y1.00</style><style>--fa-bounce-jump-scale-x1.00</style><style>--fa-bounce-jump-scale-y1.00</style><style>--fa-bounce-land-scale-x1.00</style><style>--fa-bounce-land-scale-y1.00</style></i>

The fa.Flip animation type rotates an icon in 3D space. By default, it rotates about the Y axis 180 degrees. Additionally to the common attributes, it uses the fa.X(float64), fa.Y(float64), fa.Z(float64) attributes to denote the axis of rotation (between 0 and 1) and the fa.Angle(float64) attribute to set the rotation angle.

Example

Code

fa.FA(fa.Solid, "compact-disc", fa.Flip()), " ",
fa.FA(fa.Solid, "camera-rotate", fa.Flip()), " ",
fa.FA(fa.Solid, "floppy-disk", fa.Flip()), " ",
fa.FA(fa.Solid, "scroll", fa.Flip(fa.X(1), fa.Y(0))), " ",
fa.FA(fa.Solid, "money-check-dollar", fa.Flip(fa.Duration(3*time.Second)))

ResultHTML

<i class="fa-solid fa-compact-disc fa-flip"></i>

<i class="fa-solid fa-camera-rotate fa-flip"></i>

<i class="fa-solid fa-floppy-disk fa-flip"></i>

<i class="fa-solid fa-scroll fa-flip"><style>--fa-flip-x1.00</style><style>--fa-flip-y0</style></i>

<i class="fa-solid fa-money-check-dollar fa-flip"></i>

The fa.Shake animation type shakes back and forth

Example

Code

fa.FA(fa.Solid, "bell", fa.Shake()), " ",
fa.FA(fa.Solid, "lock", fa.Shake()), " ",
fa.FA(fa.Solid, "stopwatch", fa.Shake()), " ",
fa.FA(fa.Solid, "bomb", fa.Shake())

ResultHTML

<i class="fa-solid fa-bell fa-shake"></i>

<i class="fa-lock fa-shake fa-solid"></i>

<i class="fa-shake fa-solid fa-stopwatch"></i>

<i class="fa-solid fa-bomb fa-shake"></i>

The fa.Spin animation type make the icon spin 360° clockwise. Additionally to the common attributes, it uses the fa.Pulse attribute to make the rotation in 8 steps and the fa.Reverse attribute to make the icon spin counter-clockwise.

Example

Code

fa.FA(fa.Solid, "sync", fa.Spin()), " ",
fa.FA(fa.Solid, "circle-notch", fa.Spin()), " ",
fa.FA(fa.Solid, "cog", fa.Spin()), " ",
fa.FA(fa.Solid, "cog", fa.Spin(fa.Reverse)), " ",
fa.FA(fa.Solid, "spinner", fa.Spin(fa.Pulse)), " ",
fa.FA(fa.Solid, "spinner", fa.Spin(fa.Pulse, fa.Reverse))

ResultHTML

<i class="fa-solid fa-sync fa-spin"></i>

<i class="fa-solid fa-circle-notch fa-spin"></i>

<i class="fa-solid fa-cog fa-spin"></i>

<i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>

<i class="fa-solid fa-spinner fa-spin-pulse"></i>

<i class="fa-solid fa-spinner fa-spin-pulse fa-spin-reverse"></i>

Bordered and pulled icons

Font Awesome documentation

The fa.Bordermodifier creates a border with radius and padding around an icon. The fa.PullLeft modifier pulls the icon by floating it left and applying a right margin. The fa.PullRight modifier pulls the icon by floating it right and applying a left margin.

Example

Code

e.P(
	fa.FA(fa.Solid, "quote-left", fa.Size(2), fa.PullLeft),
	"Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.",
),

ResultHTML

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

<p><i class="fa-solid fa-quote-left fa-2x fa-pull-left"></i>Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.</p>

Example

Code

e.P(
	fa.FA(fa.Solid, "arrow-right", fa.Size(2), fa.PullRight, fa.Border),
	"Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.",
),

ResultHTML

<p><i class="fa-solid fa-arrow-right fa-2x fa-pull-right fa-border"></i>Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.</p>

The following modifiers allow customizing the border and pulling effects:

fa.BorderColorSet border color: fa.BorderPaddingSet padding around icon
fa.BorderRadiusSet border radius: fa.BorderStyleSet border style
fa.BorderWidthSet border width: fa.PullMarginSet margin around icon

Example

Code

e.P(
	fa.FA(fa.Solid, "quote-left", fa.Size(2), fa.PullLeft, fa.PullMargin("4em")),
	"Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.",
)

ResultHTML

<p><i class="fa-quote-left fa-2x fa-pull-left fa-solid" style="--fa-pull-margin:4em;"></i>Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.</p>

Example

Code

e.P(
	fa.FA(fa.Solid, "arrow-right", fa.Size(2), fa.PullRight, fa.Border, fa.BorderColor("inherit"), fa.BorderPadding("0.5em"), fa.BorderRadius("100%"), fa.BorderStyle("dotted"), fa.BorderWidth("0.5em")),
	"Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.",
)

ResultHTML

<p><i class="fa-solid fa-arrow-right fa-2x fa-pull-right fa-border" style="--fa-border-style:dotted;--fa-border-width:0.5em;--fa-border-color:inherit;--fa-border-padding:0.5em;--fa-border-radius:100%;"></i>Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.</p>

Stacking icons

Font Awesome documentation

To stack multiple icons, use the fa.Stack component builder. Then add the fa.Stack1x modifier to the regularly sized icon and add the fa.Stack1x modifier to the larger icon. fa.Inverse can be added to the icon with fa.Stack1x to help with a knock-out looking effect.

Example

Code

fa.Stack(
	fa.FA(fa.Solid, "square", fa.Stack2x),
	fa.FA(fa.Brand, "twitter", fa.Stack1x, fa.Inverse),
), " ",
fa.Stack(
	fa.FA(fa.Solid, "circle", fa.Stack2x),
	fa.FA(fa.Solid, "flag", fa.Stack1x, fa.Inverse),
), " ",
fa.Stack(
	fa.FA(fa.Solid, "camera", fa.Stack1x),
	fa.FA(fa.Solid, "ban", fa.Stack2x, e.Styles{"color": "Tomato"}),
), " ",
fa.Stack(
	fa.FA(fa.Solid, "square", fa.Stack2x),
	fa.FA(fa.Solid, "terminal", fa.Stack1x, fa.Inverse),
), " ",
fa.Stack(
	fa.Size(2),
	fa.FA(fa.Solid, "square", fa.Stack2x),
	fa.FA(fa.Solid, "terminal", fa.Stack1x, fa.Inverse),
)

ResultHTML

<span class="fa-stack"><i class="fa-stack-2x fa-solid fa-square"></i><i class="fa-brands fa-twitter fa-stack-1x fa-inverse"></i></span>

<span class="fa-stack"><i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i></span>

<span class="fa-stack"><i class="fa-stack-1x fa-solid fa-camera"></i><i class="fa-solid fa-ban fa-stack-2x" style="color:Tomato;"></i></span>

<span class="fa-stack"><i class="fa-solid fa-square fa-stack-2x"></i><i class="fa-stack-1x fa-inverse fa-solid fa-terminal"></i></span>

<span class="fa-stack fa-2x"><i class="fa-solid fa-square fa-stack-2x"></i><i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i></span>

Example

Code

fa.FA(fa.Regular, "circle", fa.Size(2)), " ",
fa.Stack(
	fa.FA(fa.Regular, "circle", fa.Stack2x),
	fa.FA(fa.Solid, "flag", fa.Stack1x),
), " ",
fa.Stack(
	e.Styles{"vertical-align": "top"},
	fa.FA(fa.Solid, "circle", fa.Stack2x),
	fa.FA(fa.Solid, "flag", fa.Stack1x, fa.Inverse),
), " ",
fa.FA(fa.Regular, "circle", fa.Size(2))

ResultHTML

<i class="fa-regular fa-circle fa-2x"></i>

<span class="fa-stack" style="vertical-align:top;"><i class="fa-regular fa-circle fa-stack-2x"></i><i class="fa-solid fa-flag fa-stack-1x"></i></span>

<span class="fa-stack" style="vertical-align:top;"><i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i></span>

<i class="fa-circle fa-2x fa-regular"></i>

Example

Code

fa.FA(fa.Regular, "circle", e.Styles{"vertical-align": "middle"}), " ",
fa.Stack(
	e.Styles{"font-size": "0.5em"},
	fa.FA(fa.Regular, "circle", fa.Stack2x, e.Styles{"vertical-align": "middle"}),
	fa.FA(fa.Solid, "flag", fa.Stack1x, e.Styles{"vertical-align": "middle"}),
), " ",
fa.Stack(
	e.Styles{"font-size": "0.5em"},
	fa.FA(fa.Solid, "circle", fa.Stack2x, e.Styles{"vertical-align": "middle"}),
	fa.FA(fa.Solid, "flag", fa.Stack1x, fa.Inverse, e.Styles{"vertical-align": "middle"}),
), " ",
fa.FA(fa.Regular, "circle", e.Styles{"vertical-align": "middle"})

ResultHTML

<i class="fa-regular fa-circle" style="vertical-align:middle;"></i>

<span class="fa-stack" style="font-size:0.5em;"><i class="fa-regular fa-circle fa-stack-2x" style="vertical-align:middle;"></i><i class="fa-solid fa-flag fa-stack-1x" style="vertical-align:middle;"></i></span>

<span class="fa-stack" style="font-size:0.5em;"><i class="fa-solid fa-circle fa-stack-2x" style="vertical-align:middle;"></i><i class="fa-solid fa-flag fa-stack-1x fa-inverse" style="vertical-align:middle;"></i></span>

<i class="fa-regular fa-circle" style="vertical-align:middle;"></i>

The following modifiers allow customizing stacked icons:

fa.ZIndexSet z-index of a stacked icon: fa.InverseColorSet color of an inversed stacked icon

Example

Code

fa.Stack(
	fa.FA(fa.Brand, "twitter", fa.Stack1x, fa.Inverse, fa.ZIndex(2)),
	fa.FA(fa.Solid, "square", fa.Stack2x, fa.ZIndex(1)),
), " ",
fa.Stack(
	fa.InverseColor("#1da1f2"),
	fa.FA(fa.Solid, "square", fa.Stack2x,
	fa.FA(fa.Brand, "twitter", fa.Stack1x, fa.Inverse),
)

ResultHTML

<span class="fa-stack"><i class="fa-inverse fa-brands fa-twitter fa-stack-1x" style="--fa-stack-z-index:2;"></i><i class="fa-solid fa-square fa-stack-2x" style="--fa-stack-z-index:1;"></i></span>

<span class="fa-stack" style="--fa-inverse:#1da1f2;"><i class="fa-solid fa-square fa-stack-2x"></i><i class="fa-brands fa-twitter fa-stack-1x fa-inverse"></i></span>

Duotone icons

Font Awesome documentation

The following modifiers allow customizing duotone icons:

Modifier	Action
`fa.SwapOpacity`	Swap the default opacity of each icon's layers
`fa.PrimaryOpacity(float64)`	Set primary layer opacity
`fa.SecondaryOpacity(float64)`	Set secondary layer opacity
`fa.DuoOpacities(primary, secondary float64)`	Set primary and secondary layers opacities
`fa.PrimaryColor(string)`	Set primary layer color
`fa.SecondaryColor(string)`	Set secondary layer color
`fa.DuoColors(primary, secondary string)`	Set primary and secondary colors

Please note these icons require pro plan, which Bulma-Gomponents do not have, therefore no example may be shown.

Bulma examples

Bulma documentation

Example

Code

b.Icon(e.I(e.Class("fas"), e.Class("fa-home"))),
b.Icon(fa.FA(fa.Solid, "home")),
fa.Icon(fa.Solid, "home")

ResultHTML

<span class="icon"><i class="fas fa-home"></i></span>
<span class="icon"><i class="fa-solid fa-home"></i></span>
<span class="icon"><i class="fa-solid fa-home"></i></span>

Icon text

Bulma documentation

Example

Code

b.IconText(
	fa.Icon(fa.Solid, "home"),
	"Home",
)

ResultHTML

Home

<span class="icon-text"><span class="icon"><i class="fa-solid fa-home"></i></span><span>Home</span></span>

Example

Code

b.IconText(
	fa.Icon(fa.Solid, "train"),
	"Paris",
	fa.Icon(fa.Solid, "arrow-right"),
	"Budapest",
	fa.Icon(fa.Solid, "arrow-right"),
	"Bucharest",
	fa.Icon(fa.Solid, "arrow-right"),
	"Istanbul",
	fa.Icon(fa.Solid, "flag-checkered"),
)

ResultHTML

ParisBudapestBucharestIstanbul

<span class="icon-text"><span class="icon"><i class="fa-solid fa-train"></i></span><span>Paris</span><span class="icon"><i class="fa-solid fa-arrow-right"></i></span><span>Budapest</span><span class="icon"><i class="fa-solid fa-arrow-right"></i></span><span>Bucharest</span><span class="icon"><i class="fa-solid fa-arrow-right"></i></span><span>Istanbul</span><span class="icon"><i class="fa-solid fa-flag-checkered"></i></span></span>

Example

Code

b.Content(
	e.P(
		"An invitation to ", b.IconText(fa.Icon(fa.Solid, "utensils"), "dinner"), " was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in ", b.IconText(fa.Icon(fa.Solid, "city"), "town"), " the following day, and, consequently, unable to accept the honour of their ", b.IconText(fa.Icon(fa.Solid, "envelope-open-text"), "invitation"), ", etc.",
	),
	e.P(
		"Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his ", b.IconText(fa.Icon(fa.Solid, "flag-checkered"), "arrival"), " in Hertfordshire; and she began to fear that he might be always ", b.IconText(fa.Icon(fa.Solid, "plane-departure"), "flying"), " about from one place to another, and never settled at Netherfield as he ought to be.",
	),
)

ResultHTML

An invitation to dinner was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in town the following day, and, consequently, unable to accept the honour of their invitation, etc.

Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his arrival in Hertfordshire; and she began to fear that he might be always flying about from one place to another, and never settled at Netherfield as he ought to be.

<div class="content"><p>An invitation to <span class="icon-text"><span class="icon"><i class="fa-solid fa-utensils"></i></span><span>dinner</span></span> was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in <span class="icon-text"><span class="icon"><i class="fa-solid fa-city"></i></span><span>town</span></span> the following day, and, consequently, unable to accept the honour of their <span class="icon-text"><span class="icon"><i class="fa-solid fa-envelope-open-text"></i></span><span>invitation</span></span>, etc.</p><p>Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his <span class="icon-text"><span class="icon"><i class="fa-solid fa-flag-checkered"></i></span><span>arrival</span></span> in Hertfordshire; and she began to fear that he might be always <span class="icon-text"><span class="icon"><i class="fa-solid fa-plane-departure"></i></span><span>flying</span></span> about from one place to another, and never settled at Netherfield as he ought to be.</p></div>

Example

Code

b.FlexIconText(
			fa.Icon(fa.Solid, "info-circle", b.Info),
			"Information",
		),
		b.Block(
			html.P,
			"Your package will be delivered on ", e.Strong("Tuesday at 08:00"), ".",
		),
		b.FlexIconText(
			fa.Icon(fa.Solid, "check-square", b.Success),
			"Success",
		),
		b.Block(
			html.P,
			"Your image has been successfully uploaded.",
		),
		b.FlexIconText(
			fa.Icon(fa.Solid, "exclamation-triangle", b.Warning),
			"Warning",
		),
		b.Block(
			html.P,
			"Some information is missing from your ", e.AHref("#", "profile"), " details.",
		),
		b.FlexIconText(
			fa.Icon(fa.Solid, "ban", b.Danger),
			"Danger",
		),
		b.Block(
			html.P,
			"There was an error in your submission. ", e.AHref("#", "Please try again"), ".",
		)

ResultHTML

Information

Your package will be delivered on Tuesday at 08:00.

Success

Your image has been successfully uploaded.

Warning

Some information is missing from your profile details.

Danger

There was an error in your submission. Please try again.

<div class="icon-text"><span class="has-text-info icon"><i class="fa-solid fa-info-circle"></i></span><span>Information</span></div>
<p class="block">Your package will be delivered on <strong>Tuesday at 08:00</strong>.</p>
<div class="icon-text"><span class="has-text-success icon"><i class="fa-solid fa-check-square"></i></span><span>Success</span></div>
<p class="block">Your image has been successfully uploaded.</p>
<div class="icon-text"><span class="has-text-warning icon"><i class="fa-solid fa-exclamation-triangle"></i></span><span>Warning</span></div>
<p class="block">Some information is missing from your <a href="#">profile</a> details.</p>
<div class="icon-text"><span class="has-text-danger icon"><i class="fa-solid fa-ban"></i></span><span>Danger</span></div>
<p class="block">There was an error in your submission. <a href="#">Please try again</a>.</p>

Colors

Bulma documentation

Example

Code

b.Icon(b.Info, e.I(e.Class("fas"), e.Class("fa-info-circle"))),
b.Icon(b.Success, e.I(e.Class("fas"), e.Class("fa-check-square"))),
b.Icon(b.Warning, e.I(e.Class("fas"), e.Class("fa-exclamation-triangle"))),
b.Icon(b.Danger, e.I(e.Class("fas"), e.Class("fa-ban")))

ResultHTML

<span class="has-text-info icon"><i class="fas fa-info-circle"></i></span>
<span class="has-text-success icon"><i class="fa-check-square fas"></i></span>
<span class="has-text-warning icon"><i class="fas fa-exclamation-triangle"></i></span>
<span class="has-text-danger icon"><i class="fas fa-ban"></i></span>

Example

Code

fa.Icon(fa.Solid, "info-circle", b.Info),
fa.Icon(fa.Solid, "check-square", b.Success),
fa.Icon(fa.Solid, "exclamation-triangle", b.Warning),
fa.Icon(fa.Solid, "ban", b.Danger)

ResultHTML

<span class="has-text-info icon"><i class="fa-info-circle fa-solid"></i></span>
<span class="has-text-success icon"><i class="fa-solid fa-check-square"></i></span>
<span class="has-text-warning icon"><i class="fa-solid fa-exclamation-triangle"></i></span>
<span class="has-text-danger icon"><i class="fa-solid fa-ban"></i></span>

Example

Code

b.IconText(
	b.Info,
	fa.Icon(fa.Solid, "info-circle"),
	"Info",
),
" ",
b.IconText(
	b.Success,
	fa.Icon(fa.Solid, "check-square"),
	"Success",
),
" ",
b.IconText(
	b.Warning,
	fa.Icon(fa.Solid, "exclamation-triangle"),
	"Warning",
),
" ",
b.IconText(
	b.Danger,
	fa.Icon(fa.Solid, "ban"),
	"Danger",
)

ResultHTML

Info Success Warning Danger

<span class="is-info icon-text"><span class="icon"><i class="fa-solid fa-info-circle"></i></span><span>Info</span></span>

<span class="icon-text is-success"><span class="icon"><i class="fa-solid fa-check-square"></i></span><span>Success</span></span>

<span class="is-warning icon-text"><span class="icon"><i class="fa-solid fa-exclamation-triangle"></i></span><span>Warning</span></span>

<span class="icon-text is-danger"><span class="icon"><i class="fa-solid fa-ban"></i></span><span>Danger</span></span>

Sizes

Bulma documentation

Use a size modifier (b.Small, etc) as an argument to b.Icon or fa.Icon.

Font Awesome variations

Bulma documentation

Example

Code

fa.Icon(fa.Solid, "home", fa.FixedWidth, b.BackgroundWarningLight),
e.Br(),
fa.Icon(fa.Solid, "home", fa.Border),
e.Br(),
fa.Icon(fa.Solid, "spinner", fa.Spin(fa.Pulse))

ResultHTML

<span class="has-text-warning-light icon"><i class="fa-solid fa-home fa-fw"></i></span>
<br>
<span class="icon"><i class="fa-home fa-border fa-solid"></i></span>
<br>
<span class="icon"><i class="fa-solid fa-spinner fa-spin-pulse"></i></span>

Example

Code

b.Icon(
	b.Medium,
	fa.Stack(
		fa.SizeSm,
		fa.FA(fa.Solid, "circle", fa.Stack2x),
		fa.FA(fa.Solid, "flag", fa.Stack1x, fa.Inverse),
	),
)

ResultHTML

<span class="is-medium icon"><span class="fa-stack fa-sm"><i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i></span></span>

Example

Code

b.Icon(
	b.Large,
	fa.Stack(
		fa.FA(fa.Solid, "camera", fa.Stack1x),
		fa.FA(fa.Solid, "ban", fa.Stack2x, b.Danger),
		fa.SizeLg,
	),
)

ResultHTML

<span class="is-large icon"><span class="fa-stack fa-lg"><i class="fa-solid fa-camera fa-stack-1x"></i><i class="fa-solid fa-ban fa-stack-2x has-text-danger"></i></span></span>

Material Design Icons

Bulma documentation

Nothing specific here.

Ionicons

Bulma documentation

Nothing specific here.