Icons
Below is an example of ways to utilize icons with FontAwesome Pro.
Custom Kit Icons
fa-kit fa-bb-dog
Social Media Icons
fa-brands fa-facebook
fa-brands fa-facebook-f
fa-brands fa-square-facebook
fa-brands fa-facebook-messenger
fa-brands fa-x-twitter
fa-brands fa-square-x-twitter
fa-brands fa-instagram
fa-brands fa-square-instagram
fa-brands fa-youtube
fa-brands fa-square-youtube
Icon Animations
fa-solid fa-location-dot fa-beat
fa-solid fa-location-dot fa-beat-fade
fa-solid fa-location-dot fa-bounce
fa-solid fa-location-dot fa-fade
fa-solid fa-location-dot fa-hoverUse data attrib to specify animation type:
data-fa-animation="fa-beat"
data-fa-animation="fa-beat"
fa-solid fa-location-dot fa-hoverUse data attrib to specify animation type:
data-fa-animation="fa-beat-fade"
data-fa-animation="fa-beat-fade"
fa-solid fa-location-dot fa-hoverUse data attrib to specify animation type:
data-fa-animation="fa-bounce"
data-fa-animation="fa-bounce"
fa-solid fa-location-dot fa-hoverUse data attrib to specify animation type:
data-fa-animation="fa-fade"
data-fa-animation="fa-fade"
fa-solid fa-location-dot fa-hoverUse data attrib to specify animation type:
data-fa-animation="fa-beat"
Use inline style to adjust animation variables:
style="--fa-animation-duration: 2s; --fa-animation-iteration-count: 2;--fa-animation-timing: ease-in-out;"
data-fa-animation="fa-beat"
Use inline style to adjust animation variables:
style="--fa-animation-duration: 2s; --fa-animation-iteration-count: 2;--fa-animation-timing: ease-in-out;"
fa-solid fa-location-dot fa-hoverUse data attrib to specify animation type:
data-fa-animation="fa-beat-fade"
Use inline style to adjust animation variables:
style="--fa-animation-duration: 2.5s; --fa-animation-iteration-count: 3;"
data-fa-animation="fa-beat-fade"
Use inline style to adjust animation variables:
style="--fa-animation-duration: 2.5s; --fa-animation-iteration-count: 3;"
fa-solid fa-location-dot fa-hoverUse data attrib to specify animation type:
data-fa-animation="fa-bounce"
Use inline style to adjust animation variables:
style="--fa-animation-duration: 1.5s; --fa-animation-iteration-count: 1; --fa-animation-timing: ease-in-out;"
data-fa-animation="fa-bounce"
Use inline style to adjust animation variables:
style="--fa-animation-duration: 1.5s; --fa-animation-iteration-count: 1; --fa-animation-timing: ease-in-out;"
fa-solid fa-location-dot fa-hoverUse data attrib to specify animation type:
data-fa-animation="fa-fade"
Use inline style to adjust animation variables:
style="--fa-animation-duration: .5s; --fa-animation-iteration-count: 2; --fa-animation-timing: ease-in-out;"
data-fa-animation="fa-fade"
Use inline style to adjust animation variables:
style="--fa-animation-duration: .5s; --fa-animation-iteration-count: 2; --fa-animation-timing: ease-in-out;"
Pulled Icons
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.
fa-solid fa-quote-left fa-2x fa-pull-left
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, against the current, borne back ceaselessly into the past.
fa-solid fa-arrow-right fa-2x fa-pull-right 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.
style="--fa-pull-margin: 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, against the current, borne back ceaselessly into the past.
style="--fa-border-color: inherit; --fa-border-padding: 0.5em; --fa-border-radius: 100%; --fa-border-style: dotted;
--fa-border-width: 0.5em;"