Easy & Recommended Difficulty-level Demo : Using Font Awesome 5's SVG Framework

Font Awesome 5 Solid


Font Awesome 5 Regular


Font Awesome 5 Light


Font Awesome 5 Brands


Support Styling Examples

Here are examples of styling support you get out-of-the-box with Font Awesome 5's SVG Framework

Adjusts with size of text

small
big
deathstar

Matches text color

Plum
Goldenrod

Icon sizes

List icons

  • List icons
  • can be used
  • as bullets
  • in lists

Bordered and pulled

Pull left and border

Animated icons

Spin

Rotated and flipped icons

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Stacked icons

Stack

Framework Extras

Here are other perks you get out-of-the-box with Font Awesome 5's SVG Framework

Accessiblity

Adds aria-hidden
Adds sr-only
Doesn't duplicate sr-only
else

Ligature and unicode

Using the icon id
Using a specific ligature
magic
Using unicode
Using unicode with HTML encoding

Dynamic content

Watches mutations (5 s.)

Attribute handling

Solid
Regular
Light
Brands
Extra attributes