Tips and Tricks for Using Icons

I bet there's at least one tip in here you may not have known

⭐ Icons are fantastic tools for creating visual appeal and directing the reader's eye to important parts of your article. They can also add a touch of color and interest. They can be used at the start of paragraphs, midsentence, or even in headers.

d Free for All

BBCode Icons

There is a small selection of BBCode icons available to all users. They are listed in the BBCode Reference as well as the How to Use Icons in Your Articles tutorial.

Checkbox Icons:

	Description	BBCode		Description	BBCode
	Empty Box	[]
	Checked Box	[c]		Failed or X'd Box	[x]
	Right Chevron	[r]		Left Chevron	[l]
	Plus	[+]		Minus	[-]

How to Use Icons in Your Articles

Additionally, the Genesys and Pathfinder icons are available to all users through simple BBCode.

Genesys Icons: b b d d c c a h f s t d

b [genesysdice:setback] 

b [genesysdice:boost] 

d [genesysdice:difficulty] 

d [genesysdice:ability] 

c [genesysdice:challenge] 

c [genesysdice:proficiency] 

a [genesysdice:advantage] 

h [genesysdice:threat] 

f [genesysdice:failure] 

s [genesysdice:success] 

t [genesysdice:triumph] 

d [genesysdice:despair] 

Pathfinder Icons:

 [pf:1a]  [pf:2a]  [pf:3a]  [pf:ra]  [pf:fa]  [pf:pa] 

Unicode

You can also use some unicode characters! Just copy and paste them into your editor! Emoji and newer unicode do not work. However, these do work (and bring a pop of color).

✍️ ❤️ Unicode 1.1
⁉️ Unicode 3.0
♻️ Unicode 3.2

⚠️ ☕ Unicode 4.0
⚔️ ⚒️ ⚓ Unicode 4.1

⚲ Unicode 5.0
⭐ Unicode 5.1
⛷️ ⛺ ⛈️ Unicode 5.2

⚠️ Unicode 6 and above do not work and will prevent your article from saving.

ASCII Characters / Alt Codes

→ Additional characters are available for general use. These can be copied and pasted in or entered by their code. ♪ ♫ ♥ ‼

Images as Icons

You can also use images as icons. Simple images will work best. You can make these or find some on Pixabay or a similar site. Set the size of the image fairly small. In this instance, I have it set to 60 px width, but you can choose whatever size works best for you. Notice how the text wraps around the image.

[img:2075743|left|60]

⚠️When using images as icons or otherwise small images, you'll want to avoid adding the image attribution to the File Manager and instead add a footnote or author note about the origin of the image so the attribution does not interfere with the text. And here you can see what it looks like using the icon on the right side at 40 pixels.

[img:2075743|right|40]

Map Pin Icons - Mixed Availability

You can embed map pin icons! The text aligns to the middle when used in-line. Basic map markers are available to everyone, including free members. See the List of Interactive Map Markers for the full list and their BBCode. Ctrl+F or Cmd+F the term everyone to find those available to free users.

[pin:green_exclamationmark] [pin:blue_plain] [pin:grey_questionmark] [pin:black_standard]
[pin:orange_square] [pin:red_star] [pin:violet_triangle] [pin:yellow_circle] 

Hundreds of additional map pins are available to guild members. Please see the linked list for more options.

[pin:flat_black_dragon] [pin:flat_black_animal] [pin:flat_black_armorsmith] [pin:flat_black_bow] 
[pin:orange_camp] [pin:blue_capitol] [pin:yellow_castle] [pin:green_city] 
[pin:flat_black_cartographer] [pin:color_circle_arrow_up] [pin:flat_black_fletcher]

List of Interactive Map Markers

Font Awesome and RPG Awesome Icons - Guildmasters +

With access to sections, you can add Font Awesome and RPG Awesome icons directly to your articles. Here I've compiled some tips and tricks to get even more out of Font Awesome.

Basic Icons

Whether using the icon or section BBCode to insert icons, the internal layout remains the same. First, you must indicate whether it is a Font Awesome or RPG Awesome icon by using either fa or ra immediately after the colon. Then, add a space. Finally, you enter the code for the specific icon you want, which can be found on the respective websites.

	Website	Icon BBCode	Section BBCode
	Font Awesome	[icon:fa fa-scroll]	[section:fa scroll] [/section]
	RPG Awesome	[icon:ra ra-hydra]	[section:ra ra-hydra] [/section]

*When using sections, be sure to close the section each and every time!

Next, you might consider modifying the icon. From selecting Font Awesome icon styles to changing the size and more, you can make several modifications to the same icon to get exactly the look you want.

Update & Simplification

I originally wrote this guide using the section BBCode
[section:fa fa-strawberry] [/section]
as is consistent with the BBCode tutorial.

However, I recently discovered (thanks to a tip in this article by Nulcheck) a simpler BBCode that reduces some of the issues with paragraphing seen with the section BBCode.

[icon:fa fa-strawberry]

I will include both codes throughout this article, but I prefer the icon code for reduced potential for error.

---

Icon Styles

Most Font Awesome icons come in different styles: solid, regular, light, thin, duotone, and sharp. Not all icons are available in all styles. This table shows the standard styles and standard combinations, but new icons and styles are regularly updated and will be coded similarly, such as fa-pixel, fa-mosaic, and more. Not all icons are available in all styles. Check the Font Awesome website for specific availability.

❗You can now combine styles, such as sharp regular and duotone thin.

The same internal code is used for either icon BBCode or section BBCode, as demonstrated above. First, identify the icon as a Font Awesome icon using fa (RPG Awesome icons do not have these options). Then identify the style. Next, enter the code for the specific icon you want. If no style is identified, it defaults to solid.

Icon	Style	Internal Code	Icon	Style	Internal Code
	solid	fa fa-strawberry fa-solid fa-strawberry fas fa-strawberry		duotone solid	fa-duotone fa-strawberry fa-duotone fa-solid fa-strawberry fa-solid fa-duotone fa-strawberry
	regular	fa-regular fa-strawberry far fa-strawberry		duotone regular	fa-duotone fa-regular fa-strawberry fa-regular fa-duotone fa-strawberry
	light	fa-light fa-strawberry fal fa-strawberry		duotone light	fa-duotone fa-light fa-strawberry fa-light fa-duotone fa-strawberry
	thin	fa-thin fa-strawberry fat fa-strawberry		duotone thin	fa-duotone fa-thin fa-strawberry fa-thin fa-duotone fa-strawberry
	sharp	fa-sharp fa-strawberry fa-sharp fa-solid fa-strawberry fa-solid fa-sharp fa-strawberry		sharp duotone	fa-sharp-duotone fa-strawberry fa-sharp-duotone fa-solid fa-strawberry fa-solid fa-sharp-duotone fa-strawberry
	sharp regular	fa-sharp fa-regular fa-strawberry fa-regular fa-sharp fa-strawberry		sharp duotone regular	fa-sharp-duotone fa-regular fa-strawberry fa-regular fa-sharp-duotone fa-strawberry
	sharp light	fa-sharp fa-light fa-strawberry fa-light fa-sharp fa-strawberry		sharp duotone light	fa-sharp-duotone fa-light fa-strawberry fa-light fa-sharp-duotone fa-strawberry
	sharp thin	fa-sharp fa-thin fa-strawberry fa-thin fa-sharp fa-strawberry		sharp duotone thin	fa-sharp-duotone fa-thin fa-strawberry fa-thin fa-sharp-duotone fa-strawberry

*Note: Style indicators fas for solid, far for regular, fal for light, fat for thin do not work when combined with sharp or duotone

---

Applying Color

Wrap your code with a color tag to change the color of your icon like so:

[color:maroon][icon:fa-solid fa-strawberry][/color]
[color:#800000][section:fa-solid fa-strawberry [/section][/color]

You can use HTML color names like maroon or you can use their hex codes.

W3 Schools HTML Color Names
W3 Schools HTML Color Picker

*Note: When creating a row of multiple icons, you may need to wrap your BBCode in paragraph tags [p] [/p] in order to keep the icons together on the same line, particularly when using the section BBCode for icons.

---

Sizing

You can also modify the size of the icon, making it smaller or larger.

Small, Regular, Large

Want teeny tiny icons? You can size icons from xxsmall to xxlarge, which is the same size as 2x below.

[icon:fas fa-coffee fa-2xs]
[icon:fas fa-coffee fa-xs]
[icon:fas fa-coffee fa-sm]
[icon:fas fa-coffee]
[icon:fas fa-coffee fa-lg]
[icon:fas fa-coffee fa-xl]
[icon:fas fa-coffee fa-2xl]

Multipliers

You can quickly increase the size of an icon by adding a multiplier: fa-2x, fa-3x... up to fa-10x. This is done as demonstrated above, but click the spoiler button below for examples and explicit instructions.

Show spoiler

You can keep the regular size by not adding a sizing modifier, or you can adjust by multipliers. Here you see 1x → 10x



Simply add fa-2x, fa-3x...fa-10x inside the section BBCode. Note how the text aligns to the bottom of the icon (even this 10x) when using them in the same line/paragraph.

[icon:fa-solid fa-coffee]
[icon:fa-solid fa-coffee fa-2x]
[icon:fa-solid fa-coffee fa-3x]
[icon:fa-solid fa-coffee fa-4x]
[icon:fa-solid fa-coffee fa-5x]
[icon:fa-solid fa-coffee fa-6x]
[icon:fa-solid fa-coffee fa-7x] 
[icon:fa-solid fa-coffee fa-8x]
[icon:fa-solid fa-coffee fa-9x] 
[icon:fa-solid fa-coffee fa-10x]

[section:fa-solid fa-coffee] [/section]
[section:fa-solid fa-coffee fa-2x] [/section]
[section:fa-solid fa-coffee fa-3x] [/section]
[section:fa-solid fa-coffee fa-4x] [/section]
[section:fa-solid fa-coffee fa-5x] [/section]
[section:fa-solid fa-coffee fa-6x] [/section]
[section:fa-solid fa-coffee fa-7x] [/section]
[section:fa-solid fa-coffee fa-8x] [/section]
[section:fa-solid fa-coffee fa-9x] [/section]
[section:fa-solid fa-coffee fa-10x] [/section]

Font Awesome doc on Sizing

---

WorldAnvil Icons

These icons are specific to WorldAnvil branding

	Icon BBCode	Section BBCode
	[icon:fak fa-wa-monogram fa-2x]	[section:fak fa-wa-monogram fa-2x] [/section]
	[icon:fak fa-anvil]	[section:fak fa-anvil] [/section]

---

Rotations

Don't like the orientation of an icon? Flip it or rotate it!

BBCode

Icon	Section BBCode	Icon BBCode
	[color:#7d4cae][section:fa-light fa-coffee fa-2x] [/section][/color]	[icon:fa-light fa-coffee fa-2x]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-flip-horizontal] [/section][/color]	[icon:fa-light fa-coffee fa-2x fa-flip-horizontal]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-flip-vertical] [/section][/color]	[icon:fa-light fa-coffee fa-2x fa-flip-vertical]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-flip-both] [/section][/color] [color:#7d4cae][section:fa-light fa-coffee fa-2x fa-rotate-180] [/section][/color]	[icon:fa-light fa-coffee fa-2x fa-flip-both] [icon:fa-light fa-coffee fa-2x fa-rotate-180]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-rotate-90] [/section][/color]	[icon:fa-light fa-coffee fa-2x fa-rotate-90]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-rotate-270] [/section][/color]	[icon:fa-light fa-coffee fa-2x fa-rotate-270]

Font Awesome doc on Rotations

---

Animations

Beat:

Fade:

Beat-Fade:

Bounce:

Flip:

Shake:

Spin:

Spin-Reverse:

Spin-Pulse:

Spin-Pulse Spin-Reverse:

*New:

Buzz:

Wag:

Swing:

Spin-Snap:

Spin-Snap-4:

Spin-Snap-8:

Jello:

Float:

BBCode

Icon	Section BBCode	Icon BBCode
	[section:fa-solid fa-heart fa-2x fa-beat] [/section]	[icon:fa-solid fa-heart fa-2x fa-beat]
	[section:fa-solid fa-heart fa-2x fa-fade] [/section]	[icon:fa-solid fa-heart fa-2x fa-fade]
	[section:fa-solid fa-heart fa-2x fa-beat-fade] [/section]	[icon:fa-solid fa-heart fa-2x fa-beat-fade]
	[section:fa-solid fa-heart fa-2x fa-bounce] [/section]	[icon:fa-solid fa-heart fa-2x fa-bounce]
	[section:fa-solid fa-heart fa-2x fa-flip] [/section]	[icon:fa-solid fa-heart fa-2x fa-flip]
	[section:fa-solid fa-heart fa-2x fa-shake] [/section]	[icon:fa-solid fa-heart fa-2x fa-shake]
	[section:fa-solid fa-heart fa-2x fa-spin] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin]
	[section:fa-solid fa-heart fa-2x fa-spin fa-spin-reverse] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin fa-spin-reverse]
	[section:fa-solid fa-heart fa-2x fa-spin-pulse] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin-pulse]
	[section:fa-solid fa-heart fa-2x fa-spin-pulse fa-spin-reverse] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin-pulse fa-spin-reverse]
	[section:fa-solid fa-heart fa-2x fa-buzz] [/section]	[icon:fa-solid fa-heart fa-2x fa-buzz]
	[section:fa-solid fa-heart fa-2x fa-wag] [/section]	[icon:fa-solid fa-heart fa-2x fa-wag]
	[section:fa-solid fa-heart fa-2x fa-swing] [/section]	[icon:fa-solid fa-heart fa-2x fa-swing]
	[section:fa-solid fa-heart fa-2x fa-spin-snap] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin-snap]
	[section:fa-solid fa-heart fa-2x fa-spin fa-spin-snap-4] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin fa-spin-snap-4]
	[section:fa-solid fa-heart fa-2x fa-spin-snap-8] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin-snap-8]
	[section:fa-solid fa-heart fa-2x fa-spin-pulse fa-jello] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin-pulse fa-jello]
	[section:fa-solid fa-heart fa-2x fa-spin-pulse fa-float] [/section]	[icon:fa-solid fa-heart fa-2x fa-spin-pulse fa-float]

You can still apply color here as well!

[color:orange][icon:fas fa-2x fa-sun fa-spin] [/color] or [color:orange][section:fas fa-2x fa-sun fa-spin] [/section][/color]

Font Awesome doc on Animate

---

Borders

You can add borders around your icon!

[icon:fa-solid fa-comment-music fa-2x fa-border] or [section:fa-solid fa-comment-music fa-2x fa-border] [/section]

On some themes, the border will appear darker, thicker, etc. Borders can be customized using CSS

.user-css .fa-border

Font Awesome article on borders and pulls

Pulled Icons

Icons can be used in front of a paragraph to draw attention to an important part of the article, but notice how it extends above the text. Instead, you can use the pull command to get this to look less unruly:

Pull Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas et risus quis mollis. Nullam nulla sem, sollicitudin vitae metus nec, semper vestibulum libero. Maecenas semper massa et massa ornare, nec luctus magna rutrum. Vivamus rhoncus lobortis ipsum, quis feugiat ipsum pharetra et. Etiam ipsum libero, faucibus sed varius a, scelerisque vitae dui.

Pull Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas et risus quis mollis. Nullam nulla sem, sollicitudin vitae metus nec, semper vestibulum libero. Maecenas semper massa et massa ornare, nec luctus magna rutrum. Vivamus rhoncus lobortis ipsum, quis feugiat ipsum pharetra et. Etiam ipsum libero, faucibus sed varius a, scelerisque vitae dui.

Drop Cap

You can also put Font Awesome and RPG Awesome icons into a dropcap, though the size is much larger than the pulled icons.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas et risus quis mollis. Nullam nulla sem, sollicitudin vitae metus nec, semper vestibulum libero. Maecenas semper massa et massa ornare, nec luctus magna rutrum. Vivamus rhoncus lobortis ipsum, quis feugiat ipsum pharetra et. Etiam ipsum libero, faucibus sed varius a, scelerisque vitae dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas et risus quis mollis. Nullam nulla sem, sollicitudin vitae metus nec, semper vestibulum libero. Maecenas semper massa et massa ornare, nec luctus magna rutrum. Vivamus rhoncus lobortis ipsum, quis feugiat ipsum pharetra et. Etiam ipsum libero, faucibus sed varius a, scelerisque vitae dui.

	BBCode
Pull Left	[icon:fa-solid fa-comment-music fa-3x fa-pull-left fa-flip-horizontal] [section:fa-solid fa-comment-music fa-3x fa-pull-left fa-flip-horizontal] [/section]
Pull Right	[icon:fa-solid fa-comment-music fa-3x fa-pull-right] [section:fa-solid fa-comment-music fa-3x fa-pull-right] [/section]
Drop Cap	[dc][icon:fa-solid fa-comment-music] [/dc] [dc][section:fa-solid fa-comment-music] [/section] [/dc]

RPG Awesome Icons

RPG Awesome icons can be subjected to many of the same actions as demonstrated above. However, they cannot be animated and do not come in different styles.

[icon:ra ra-raven] or [section:ra ra-raven] [/section]
[icon:ra ra-raven ra-3x] or [section:ra ra-raven ra-3x] [/section]
[section:ra ra-raven ra-3x ra-flip-horizontal] [/section]
[section:ra ra-raven ra-3x ra-rotate-270] [/section]

❗While the icon BBCode does work on the basic RPG icons and resizing, rotations and flips would only work using the section BBCode.

>>>Huge thanks to CraniumBeaver for that tip and for the CSS to adjust the borders:

.user-css .ra-border { 
border: solid .7em #000;
border-radius: .35em;
padding: .3em; 
background: #E2340945; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas et risus quis mollis. Nullam nulla sem, sollicitudin vitae metus nec, semper vestibulum libero. Maecenas semper massa et massa ornare, nec luctus magna rutrum. Vivamus rhoncus lobortis ipsum, quis feugiat ipsum pharetra et.

[section:ra ra-raven ra-3x pull-left ra-border] [/section]

Variables

If you find yourself using certain icons often, you can create a variable that contains all of the desired BBCode. You can include not only the icon, but also the color.

Feature Guide to Variables

>>>Shout out to Graylion for reminding me about variables :)

---

Hand icon edited from: No Admittance by OpenIcons from Pixabay