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.
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
Pathfinder Icons: 
⚠️ Unicode 6 and above do not work and will prevent your article from saving.
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.
⚠️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.
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.
Hundreds of additional map pins are available to guild members. Please see the linked list for more options.
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 | [-] |
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]
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).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
[img:2075743|left|60]
[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]
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.
WorldAnvil Icons
A small number of WorldAnvil icons are available for Guildmasters and above. [section:fak fa-wa-monogram fa-2x] [/section]
[section:fak fa-anvil] [/section]
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]
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.
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] [color:#800000][section:fa-solid fa-strawberry fa-3x] [/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
W3 Schools HTML Color Picker
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
Font Awesome doc on Rotations
You can still apply color here as well!
Font Awesome doc on Animate
Hand icon edited from: No Admittance by OpenIcons from Pixabay
You can keep the regular size by not adding a sizing modifier, or you can adjust by multipliers. Here you see 1x → 10x
Font Awesome doc on Sizing
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]
Rotations
Don't like the orientation of an icon? Flip it or rotate it!
BBCodeIcon |
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] |
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] |
[color:orange][section:fas fa-2x fa-sun fa-spin] [/section][/color]
Borders
You can add borders around your icon![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-borderFont 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, 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:
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.You can also put Font Awesome and RPG Awesome icons into a dropcap, however, they become 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 that contains all of the desired BBCode.
You can include not only the icon, but also the color.
>>>Shout out to Graylion for reminding me about variables :)
Hand icon edited from: No Admittance by OpenIcons from Pixabay
© 2021 - 2022. All content and images created by HM Craven (hcraven) unless otherwise stated. All rights reserved.
Cover image:
by
hcraven using Font Awesome icons
Wonderful work sir :)
World Anvil Founder & Chief Grease Monkey
Join the Solspire Chronicles Adventure!
“No act of kindness, no matter how small, is ever wasted.”
- Aesop
Thank you :)