Advanced Use of Title Icons
Advanced Use of Icons
The icon select interface will work great for the majority of WA users. Some of us, however, like to get particular about things. We have preferences and want things to be just so. And sometimes we want to use an icon that doesn't appear in WA's search.The only way to do this is by editing the icon code directly, which we currently can only do using the Old Version Edit. For articles, go to the Design tab, Basic sub-tab, and scroll down to the Icon field. For categories, you'll see the Icon field on the Basic Details tab.
Icon codes are fairly simple: for RPG-Awesome, they're ra ra-icon-name, such as ra ra-aura. For FontAwesome, they're fa-style fa-icon-name, where style is one of solid, regular, light, or thin, such as fa-regular fa-globe. The WA icon interface does this part for you. The advanced options are what we can add onto the end of this code.
Icon Alignment
Not all icons take up the same amount of space. If you want your codex article titles to line up nicely, you'll want to make all of your icons a fixed width. Both RPG-Awesome and FontAwesome have a version of this:- For RPG-Awesome, add ra-fw to your icon code, which makes the icon 1.28571em in width.
- For FontAwesome, add fa-fw, which makes the icon 1.25em in width.
Default
ra ra-catfa-solid fa-1
ra ra-vial
fa-solid fa-fire
ra ra-toast
Mixed fw
ra ra-cat ra-fwfa-solid fa-1 fa-fw
ra ra-vial ra-fw
fa-solid fa-fire fa-fw
ra ra-toast ra-fw
All fa-fw
ra ra-cat fa-fwfa-solid fa-1 fa-fw
ra ra-vial fa-fw
fa-solid fa-fire fa-fw
ra ra-toast fa-fw
FontAwesome Tools
These options only apply to FontAwesome icons. There are a variety of ways you can customize these further with CSS, which I won't be getting into here. For more on that, check out the official FA documentation .Duotone
Selectable from the WA icon interface, duotone makes your FA icon have two shades. To apply this option manually, such as to include it with other options, add fa-duotone to your icon code.
fa-solid fa-flame
fa-solid fa-flame fa-duotone
fa-thin fa-flame fa-duotone
fa-solid fa-flame fa-duotone
fa-thin fa-flame fa-duotone
Rotate
To spin your icon, add fa-rotate-X, where X is 90, 180, or 270 for the degree of rotation you want.
Important: You cannot apply both rotate and flip code to the same title icon.
Flip
To mirror an icon, add fa-flip-X, where X is horizontal, vertical, or both.Important: You cannot apply both rotate and flip code to the same title icon.
fa-regular fa-cat-space
fa-regular fa-cat-space fa-rotate-90
fa-regular fa-cat-space fa-flip-horizontal
fa-regular fa-cat-space fa-rotate-90
fa-regular fa-cat-space fa-flip-horizontal
Animation
Animations can be very distracting, so use these options carefully. To animation an icon, add fa-X, where X is beat, fade, beat-fade, bounce, flip, shake, or spin.
fa-light fa-envelope
fa-light fa-envelope fa-beat
fa-light fa-envelope fa-shake
fa-light fa-envelope fa-beat
fa-light fa-envelope fa-shake
Custom Icons
If you've created custom iconography, you may want to use those for categories and articles. This is where we get real tricky. If everything above was advanced, this is expert. The trick here is that you can actually put anything you want in the icon code field, including something like my-icon fa-fw. Then you can use custom CSS to make my-icon a custom image.This does get fussy, especially with alignment and colors and other details. I recommend being comfortable with trial-and-error and a Good Enough approach. If you'd like to see this in use, head to my main world wow that's a lot of stars and check out the codex. Expand any cluster and you'll see custom icons for each planet. I also have custom icons for psionic disciplines under Galactic, Metaphysics.
FAQ
Why do I suddenly have icons?
The new editor adds icons by default for every article and category you create or edit through that interface. If you've noticed some articles have icons and others don't, this is why.How do I get rid of them?
You can click an icon and then the trash bin icon to remove it for that page. However, there is currently no option to disable them entirely.The below code should hide all category and article icons in your codex and on page titles. You'd copy/paste this into your presentation CSS, found in the paint palette icon when viewing your World, or under your world styling menu from the sidebar (gear icon, paint palette icon).
.user-css .category-title-icon,
.user-css .article-title-icon {
If it doesn't cover everything, or if you want to be more granular, come to the css-help channel on the Discord.
.user-css .article-title-icon {
display: none;
}
Why aren't my icons showing?
You may find you can see the icon in some places but not others, such as when editing but not when viewing, or in the codex but not breadcrumbs.This is a bug that's being worked on, and might even be fixed by now. Using the advanced means of applying an icon described in this guide bypasses the cause of this issue.
Can't I do most of this with CSS?
Yes, options like fixed width and rotating can usually also be done with custom CSS. However, modifying the icon code is easier than the custom CSS to do the equivalent, and is available to free users.Will icon codes be added to the new interface?
I don't know. I'm hopeful icon codes will be added as an advanced feature in the styling menu, for the minority of us who use them heavily, but I haven't seen any official statement to that effect.If you have an opinion on the matter, let the WA team know using the ? menu at the top right, then Send Feedback.
This is great! :D
Thank you! I hope it helps until the official guide is available.
✏️ Add yourself to the World of Worlds