[Omniscient]

Font Awesome Icons in Posts
Add icons to your posts with customizable colors, sizes, and styles.

---

Basic Usage

Use a single tag with the icon's name:

Code

[fa icon=gear]

Result:

There is no closing tag.

---

Colors and Sizes

Code

[fa icon=star color=#ffcc00 size=2x]
[fa icon=heart color=#ff4444 size=lg]
[fa icon=bolt color=#00ff00 size=3x]

Colors must use hexadecimal notation, such as #00ff00 or #0f0. Named colors such as green are not supported.

Available sizes within HF's default limit:
2xs, xs, sm, normal, lg, xl, 2xl, 1x, 2x, 3x

Without a color or size, the icon inherits the surrounding text color and uses normal text size.

---

Icon Styles

Choose a style with the type option:

Code

[fa icon=star type=solid]
[fa icon=star type=regular]
[fa icon=star type=light]
[fa icon=star type=thin]

The default style is solid. Brands use type=brands:

Code

[fa icon=discord type=brands color=#5865f2 size=2x]
[fa icon=bitcoin type=brands color=#f7931a size=2x]

The icon must exist in the selected style and HF's installed Font Awesome 6.1.1 collection. Icons introduced in later releases will not display.

---

Animation

Use spin=yes for smooth rotation or pulse=yes for stepped rotation.

Code

[fa icon=gear spin=yes color=#b388ff size=2x]
[fa icon=spinner pulse=yes color=#00ff00 size=2x]

Choose one animation per icon.

---

Rotation and Flipping

Rotation supports 90, 180, or 270 degrees:

Code

[fa icon=arrow-up rotate=90]
[fa icon=arrow-up rotate=180]
[fa icon=arrow-up rotate=270]

Flipping supports horizontal, vertical, or both:

Code

[fa icon=dragon flip=horizontal color=#b388ff size=2x]

---

Aligned Icon Lists

Use fixed=yes to give each icon the same width:

Code

[fa icon=check color=#00ff00 fixed=yes] Completed
[fa icon=clock color=#ffcc00 fixed=yes] Pending
[fa icon=lock color=#ff4444 fixed=yes] Locked

Completed
Pending
Locked

---

Combining Options

Options can appear in any order:

Code

[fa icon=shield-halved type=regular color=#b388ff size=2x fixed=yes]

Protected

---

Finding Icons

Browse Font Awesome's icon collection for names. Check that the icon is available in version 6.1.1.

Use the icon name without the fa- prefix. For example, use user-secret:

Code

[fa icon=user-secret color=#00ff00 size=2x]

---

Limits and Troubleshooting

• The default maximum size is 3x.
  
• The default limit is 100 rendered icons per message.
  
• Invalid options or values leave the tag visible as text.
  
• A blank icon usually means the icon name or selected style is unavailable.
  
• Examples inside code blocks remain literal.
  
• Icons are decorative; include text when their meaning matters.
  

HF ICON LAB



A little purple. A little chaos. A lot of icons.

---

Hacker Toolkit

---

Pro Style Comparison

Solid
Regular
Light
Thin

---

Animated Machinery

---

Brand Row

---

Rotation Test



Mirror Test

---

Fixed Width Alignment

Access granted
Vault secured
Systems online
Watching everything

---

Size Ladder

---

Parser Checks — These Should Remain Text

Oversized: [fa icon=gear size=99x]
Invalid color: [fa icon=gear color=banana]
Unknown option: [fa icon=gear onclick=hello]

Code

This example must remain literal:
[fa icon=dragon color=#b388ff size=3x]

[DemonAsylum]

Damn, some of these are actually pretty nice and could serve as great little additions to lots of posts. Looking forward to hopefully seeing them get used around the forum. Thanks for this.

[Omniscient]

FA is about 3000 unique icons. It's way more than the few in the demo. Maybe I can make it an HF Tool to do search by icon checks?

[xadamxk]

FA is about 3000 unique icons.  It's way more than the few in the demo.  Maybe I can make it an HF Tool to do search by icon checks?

Like an emoji picker but for these icons.
That would be sick.

[Omniscient]

Like an emoji picker but for these icons.
That would be sick.

I'll think about how I can implement that. I can imagine a good popup with a "search" that pulls up relevant icons and then inserts the code with js into your post.

Might be able to do it somewhere around the Smilies box, which I should change to Emoji's since technically that's what they are now.

[DemonAsylum]

FA is about 3000 unique icons. It's way more than the few in the demo. Maybe I can make it an HF Tool to do search by icon checks?

Yeah that's a great idea. It would make it much more convenient.

[Terry A. Davis]

Font Awesome and Bootstrap Icons.

If you don't want a list, could BBCode be used to just be like :bi-icon: or :fa-icon: and it auto-know what we're doing?

[Jamika]

That’s really great! I think this will make the topics look much better.