Custom Bullets with CSS + Small Image or SVG (Ditch ul & li)

One of my personal pet peeves is the BBcode for tables and unordered lists. The code just gets unwieldy and hard to read quickly. Containers make it easy to create a nice list with fewer BBCode tags.  

What you'll need to create your own image bullet point lists:
A small image (say 10x10 pixels) or SVG image to be your bullet icon, already loaded in WA. (PNGs can handle transparency.) Then view the image and right-click to get it's URL/address.
A bit of CSS to create the container that places of the image in front of your text (or whatever).
The BBCode surrounding the text you want bulleted.

Note: we can't use a text character instead of an image because that requires using " in the CSS and quotes not allowed here on WA CSS.
 
First, we'll tackle using a small image.
Then we'll look at how to use an SVG. (Which are much clearer images to view.)
 
Author's note These custom containers work great with a Text Expanders . For example, to insert my custom blue box here, I typed SHIFT+ALT+B and it put the container codes around the text.
 
 

CSS for Small Image

.bullet::before{ 
 content: url(https://www.worldanvil.com/uploads/images/244b81e6f9ca9b331210b2cd46cb46d2.png) ;
  padding-right: 10px;
  padding-left: 10px;
}

::before puts the image infront of whatever is inside the container named .bullet   content: url(your image address here) is your image bullet   padding-right gives us a little space before the text   padding-left gives a little indent

Note: The container will span the width of the page unless you tell it otherwise with CSS or putting the container into something like [col] tags.  

BBCode

[container:bullet] Your text 1[/container]
[container:bullet] Your text 2[/container]
[container:bullet] Your text 2[/container]
 

Example of small image as bullet icon:

Point 1
Point 2
Point 3
   
 

CSS for SVG Icon

.bullet-svg::before { 
 content: url(https://www.worldanvil.com/uploads/images/6727df8e36cbc316848bd02c5b8b966d.svg) ;
  display:inline-block;
  width: 15px;
  margin: 0 10px 0 0;
}

::before puts the image infront of whatever is inside the container named .bullet-svg   display:inline-block; gives your svg image bounds so it doesn't take up the whole page/column and puts it in the same line as your text.   width: tells how big the SVG image should be.   margin: 0 10px 0 0;gives us a little space before the text

 

Example of SVG icon:

Point 1
Point 2
Point 3
   
Raccoon head icon by Delapouite at game-icons.net.
 
An example of using SVG images as bullets and TOC bullets is on my world, Liminal Chronicles.
 
 
Other possible uses:
Adding a decorative image on the sides if headers
Adding a special character that doesn't work well with regular text. (I'm thinking Kanji in Japanese.)
Adding a bullet in front of items in the TOC
 
Credits: Inspiration for this came from when Adriand in the #guild-css-help channel helped me figure out how to put an "<" image in front of the Back to World link for my book's world.

For Grandmasters +

Grandmaster Icon


Containers and Sections are for guild members Grandmaster and above. If you're not subscribed at that level, you can upgrade your membership on your account page.


(Grandmaster icon property of World Anvil.)

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

8/14/2019:
Added SVG directions. Since we're able to use Font Awesome and game-icons.net icons in containers, I wanted to be able to use them for our TOC icons too!
  8/15/2019:
Added note about using this with text expanders - for writing/coding efficiency.

Comments

Please Login in order to comment!
Powered by World Anvil