How to Change the TOC Symbols

I thought I already had a write up for this! But when there was a question about it...GASP! Nada. So here we go! On the plus side, I learned how to color the Font Awesome and Game-icon.net SVG images.

 
What you'll need:
2 (or more) images (png, gif, jpeg, svg) uploaded to your WA account - they can be your own or downloaded from the likes of Font Awesome, RPG Icons, or Game-icons.net. (See side panel for information and links.)
A bit of CSS
 

Our example:

We have 2 different versions for you. One uses a png image I created myself (the wrench). The other uses a Font Awesome SVG icon (the toolbox). Here's a screenshot of my TOC at the time of writing this tutorial.

TOC icon replacement

   

CSS

 
.user-css #world-menu .fa-file:before { 
 content: url(https://www.worldanvil.com/uploads/images/244b81e6f9ca9b331210b2cd46cb46d2.png) ;
 padding-left: 20px;
}
 
 .user-css #world-menu .category-list .list-box .fa-folder {
  content: url(https://www.worldanvil.com/uploads/images/e6501914a89d8566d98202b8927da418.svg
  margin-left: 10px; 
  width: 15px;
filter: invert(.8) ; 
}
		

png/gif/jpg example

In this example I use my own PNG file. But if you want to use and SVG, just swap out the bits between the {} with what is in the example for the Folder SVG.

.user-css #world-menu .fa-file:before - file icon class

content: url(your image url) - (self explanatory, I think)   padding-left: 20px; - this is what worked for my icon. You may need to change this to suit your tastes.   * you also may need to add a line for width: 15px; or the like if you don't make your image the exact size you need *  

Using an SVG of your own or from Font Aweseome/Game-icons.net

 

In this example I use a Font Awesome icon. But if you want to use a regular image file, just swap out the bits between the {} with what is in the example for the file icon.

  .user-css #world-menu .category-list .list-box .fa-folder - folder image class (we're replacing the folder icon, instead of putting something before it)   content: url(your SVG image url here) - you need to have the SVG icon uploaded in your images - even if it's from Font Awesome or Game-icons.net   margin-left: 10px; - scoots the icon to match where the left side of my headers starts, adjust as you see fit   width: 15px; - controls the size of the icon.   filter: invert(.8) - because we didn't load the SVG image in the usual manner, we can't use 'fill' or 'color' to change it from black to a light grey. But we can use 'filter' to change the look of the icon - so in this page's case we can see it against my dark background. See notes below for more information on 'filter'.
   

Why Can't We Use Fill or Color?

For more information on why our SCG images used this way can't use 'fill' or 'color', but we can use 'filter' see Swapping Fill Color on Image Tag SVGs .   Information on the filter property is available here. (There are all sorts of fun effects!)
   

For Changing Other Icons

If you need to change other icons, for example your theme uses an old version of the TOC or something like that, here's how to find the classes.   In your browser, right-click on the icon you want to change and choose 'Inspect' (or your browser's flavor of it). The development window will pop up. Open up all the little triangle icons until you get to the ::before code as in the image below.  
Lengua's Screen - as we used Inspect to find the right Icon
Using Inspect to find the right Icon by Lengua and ShyRedFox
  In the case in the image above, each class under the Table Of Contents Text what we needed. So the class would be .user-css .category-list .list-box .collapser .fa-plus-square:before (remember you need .user-css in front of it. You also MUST have the :before after it, or you get a HUGE icon. LOL - I found that out!)

Share Your Creations


I'd love to see how you use this idea! Let me know in the comments or on Discord (ShyRedFox#7256 or the Liminal Chronicles server).

For Guild Members

Journeyman 30x30.png


CSS modification is for guild members (Journeyman and above). If you're not subscribed at that level and wish to do so, you can on the membership page.


(Journeyman icon property of World Anvil.)

 

Where to Find Ions

Font Awesome Icons and RPG Icons are available for use on WA. See The Icons Codex Section. Utilizing them as a font is available for Grandmaster + because they use containers and sections.   But what we'll be doing is a simple icon replacement, which doesn't require containers. So Journeyman + can use this tutorial.   We don't have to give attribution for the icons, because WA purchased a license to use them.   Though, if you use the icons outside of WA purposes (for CSS and BBCode) then you need to give attribution to abide by the relevant licenses.

CSS Reference


If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.
 
The WA Codex is a good place to start learning about how to play in WA.
 
WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.

Updates

12/27/2019 - Updated SVG option with width and modified margin.
9/26/2019 - Added info on changing other icons.


Cover image: Hacks and Help Cover by krzysztof-m

Comments

Please Login in order to comment!
Powered by World Anvil