Guide to Icons
What are icons?
Icons are small images that appear to the left of article and category titles in your codex, as well as with the title when viewing the category/article page. You might be most used to seeing this one. Icons are a great way to give quick visual information about categories and articles, especially in the codex where you don't see much other then the title without having to click through.How are icons set?
All icons have a code that tells World Anvil which icon to display and how. WA currently supports icons from RPG-Awesome and FontAwesome. For RPG-Awesome, the code is ra ra-icon-name, such as ra ra-aura. For FontAwesome, the simple version is fa-solid fa-icon-name, such as fa-solid fa-house. FontAwesome offers a lot of variety, and you can see different potential codes by clicking on the icon on their website. The new/modal/pop-up method of creating and editing articles automatically applies this code based on the article's template. If you have some articles with icons and others without, or noticed a sudden change of what icon was being applied, this new editor is likely the culprit. Read on for options on what to do about it.Code-Based Icon Edits
There are two places you can enter, remove, or modify an icon code:- Open the full-page edit of the article or category (this is now labeled as "old version edit" in the WA UI). 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.
- Open the article manager, Athena. Select your article or category to open the right-side quick edit panel. You'll see the Icon field there. This is the easiest way to make changes.
Code-Free Icon Edits
Open the modal edit, the new/pop-up version. To the left of the article/category title will be either the icon currently set or a blank space. Click in there to either search for a select a new icon or use the X button to remove the icon entirely.Why are my icons broken?
Typically, an icon not appearing means there's something wrong with the icon code. At time of writing, there's a bug with the code-free icon select in which it's both setting the wrong code and expecting the wrong code. Instead of setting the icon code to ra ra-icon-name, it's only setting ra-icon-name, and it's similarly not including the fa-solid for FontAwesome icons.
Until the bug is fixed, you can repair your own broken icons by editing the code to add the missing pieces.
How do I get rid of them?
I love icons and think they can be used in a variety of ways to help readers navigate your codex. That said, not many readers navigate worlds via the codex, and maybe you really hate icons. You can go through all your articles and delete the icon code, but you can also use CSS to hide them completely. The below code should hide all category and article icons in your codex and on page titles. If it doesn't cover everything, or if you want to be more granular with which icons you hide, come to the css-help channel on the Discord.
.user-css .category-title-icon,
.user-css .article-title-icon {
.user-css .article-title-icon {
display: none;
}
This is great! :D
Thank you! I hope it helps until the official guide is available.
✏️ Take a WA unofficial survey
⛱️ Vacation with ghosts in Su-mehr Qiamp