Hack Forums
[News] Font Awesome MyCode - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Hack Forums Official Information (https://hackforums.net/forumdisplay.php?fid=1)
+--- Forum: Site News (https://hackforums.net/forumdisplay.php?fid=2)
+--- Thread: [News] Font Awesome MyCode (/showthread.php?tid=6333217)

Font Awesome MyCode - Omniscient - Oct 8, 2026



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]


RE: Font Awesome MyCode - DemonAsylum - Oct 8, 2026

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.



RE: Font Awesome MyCode - Omniscient - Oct 8, 2026

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?

RE: Font Awesome MyCode - xadamxk - Oct 8, 2026

(Oct 8, 2026 01:31 PM)Omniscient Wrote:  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.

RE: Font Awesome MyCode - Omniscient - Oct 8, 2026

(Oct 8, 2026 02:45 PM)xadamxk Wrote:  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.

RE: Font Awesome MyCode - DemonAsylum - Oct 8, 2026

(Oct 8, 2026 01:31 PM)Omniscient Wrote:  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.

RE: Font Awesome MyCode - Terry A. Davis - Oct 8, 2026

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?

RE: Font Awesome MyCode - Jamika - Oct 10, 2026

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