Tips and Tricks for Using Icons

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

Free for all

BBCode icons

There is a small selection of BBCode icons available to all users. They are listed in the Codex and can be found in the Design Tag Reference. I find the checkboxes to be particularly useful.

[] [c] [x] [r] [l] [+] [-]

Map Pin Icons

You can embed map pin icons!
The sizes do vary, and the text aligns to the middle when used in-line.

[pin:flat_black_dragon]
[pin:yellow_exclamationmark] 

To search map pins, edit any map and then press Alt+enter. Copy the BBCode by pressing on the little clipboard next to the icon of your choice and paste it into your editor.

Pathfinder and Genesis icons are also available to everyone through BBCode as demonstrated in the Codex above.

Unicode

You can also use some unicode characters! They can even be used ❤️ in the middle of sentences.
Emoji and newer unicode do not work. However, these do work (and bring a pop of color). Just copy and paste them into your editor!

✍️ ❤️ 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.

Images as Icons

You can also use images as icons. Any image will work, but simple ones will work best. You can make these or find some on Pixabay Set the size of the image fairly small. In this instance, I have it set to 50 px width, but you can adjust as you like. Notice how the text wraps around the image.

In this case, 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.

[img:2075743|left|70] [img:####|right|50] 

You can do either left or right and adjust the size as needed.

Tips for Font 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. Some of these abilities are outlined in the Codex article on Guild BBCode, but some are not.

Icon Styles

Most Font Awesome icons come in different styles. This how you'd use a particular style:

[section:fa-solid fa-strawberry fa-3x] [/section]
[section:fa-regular fa-strawberry fa-3x] [/section]
[section:fa-light fa-strawberry fa-3x] [/section]
[section:fa-thin fa-strawberry fa-3x] [/section]
[section:fa-duotone fa-strawberry fa-3x] [/section]

Applying Color

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

[color:maroon][section:fa-solid fa-strawberry fa-3x] [/section][/color]

For some reason, when having several icons as I have here, you may need to wrap them in paragraph tags [p] [/p] in order for them to appear together horizontally. I have no explanation, but this became especially important in the animation section below.

---

Sizing

Small, Regular, Large

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

[section:fa-solid fa-coffee fa-2xs] [/section]
[section:fa-solid fa-coffee fa-xs] [/section]
[section:fa-solid fa-coffee fa-sm] [/section]
[section:fa-solid fa-coffee] [/section]
[section:fa-solid fa-coffee fa-lg] [/section]
[section:fa-solid fa-coffee fa-xl] [/section]
[section:fa-solid fa-coffee fa-2xl] [/section]

Sizing to Scale

This is using the fa-2x, fa-3x... up to fa-10x. You've already seen this 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.

[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

---

Rotations

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

BBCode

Icon	BBCode
	[color:#7d4cae][section:fa-light fa-coffee fa-2x] [/section][/color]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-flip-horizontal] [/section][/color]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-flip-vertical] [/section][/color]
	[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]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-rotate-90] [/section][/color]
	[color:#7d4cae][section:fa-light fa-coffee fa-2x fa-rotate-270] [/section][/color]

Font Awesome doc on Rotations

---

Animations

BBCode

Icon	BBCode
	[section:fa-solid fa-heart fa-2x fa-beat] [/section]
	[section:fa-solid fa-heart fa-2x fa-fade] [/section]
	[section:fa-solid fa-heart fa-2x fa-beat-fade] [/section]
	[section:fa-solid fa-heart fa-2x fa-bounce] [/section]
	[section:fa-solid fa-heart fa-2x fa-flip] [/section]
	[section:fa-solid fa-heart fa-2x fa-shake] [/section]
	[section:fa-solid fa-heart fa-2x fa-spin] [/section]
	[section:fa-solid fa-heart fa-2x fa-spin fa-spin-reverse] [/section]
	[section:fa-solid fa-heart fa-2x fa-spin-pulse] [/section]
	[section:fa-solid fa-heart fa-2x fa-spin-pulse fa-spin-reverse] [/section]

You can still apply color here as well!

[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!

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

On some themes, it will appear darker, thicker, etc. It can also be customized using CSS

.user-css .fa-border

Font Awesome article on borders and pulls

Pulled Icons

I really wish I had figured this out sooner! Most the time I use icons in front of a paragraph to draw attention to an important part of the article, but am not really happy with how it extends above the text, and sometimes even crowds the first word, as you can see here.
Instead, you can use the pull command to get this to look less unruly (Time to go update some articles):

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.

For reference, here's what it looks like when you shove an icon into a dropcap (ginormous):
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	[section:fa-solid fa-comment-music fa-3x fa-pull-left fa-flip-horizontal] [/section]
Pull Right	[section:fa-solid fa-comment-music fa-3x fa-pull-right] [/section]

RPG Awesome Icons

RPG Awesome icons can be subjected to many of the same actions as demonstrated above. However, they cannot be animated.

[section:ra ra-raven ra-3x] [/section]
[section:ra ra-raven ra-3x ra-flip-horizontal] [/section]
[section:ra ra-raven ra-2xs] [/section]
[section:ra ra-raven ra-3x ra-rotate-270] [/section]

>>>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; }

Some of the Font Awesome articles linked throughout also detail further CSS customizations.

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, which will allow you to simply type the opening bracket [ plus 3 letters of whatever you've named that variable.
You can include not only the icon, but also the color. For instance, when I type [blo in my other world, I can select the blood variable, which is specific icon I frequently use in that world:

 [color:#A2152D][section:ra ra-2x ra-water-drop] [/section][/color] 

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

---

Hand icon edited from: No Admittance by OpenIcons from Pixabay