Customize a list item on webflow

Discover how to customize a bullet point list with a media file in your Webflow project for your website!

Key points to remember

Bullet lists (or bullet point) are very interesting elements to put on a website. They allow :

Highlighting information
Structure the information
Simplify the reading and understanding of information

On Webflow, it is possible to add bulleted lists in your project or even to insert them in rich text (for blog posts for example). However, the design possibilities natively in Webflow are limited for these elements.

In our tutorial, we will show you how to change the style of your bulleted lists by changing the dot to the image you want!

Step 1: Add a bulleted list in Webflow

The first step of this tutorial will be to insert the "List" element in your project. You will have to give a class to this bulleted list.

If you want to customize the appearance of bulleted lists in your rich text, you can go to your guide style or insert a rich text element to which you will give a class.

Step 2: Upload your media file to Webflow

In parallel, you can add in your assets (Webflow library), the media file that will replace the usual bulleted points of the list.

Step 3: Add the following code to your project

You will now insert the following code.

If the customization is done for a list element :

<style>
ul.nom-de-votre-classe {
  list-style-type: none;
}

ul.nom-de-votre-classe li:before {  
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-size: 10px;
  background-image: url("lien-de-votre-fichier-média");
  background-repeat: no-repeat;
  margin-right: 10px;
  }
</style>

If the customization is done for a rich text :

<style>
.nom-de-votre-classe ul {
  list-style-type: none;
}

.nom-de-votre-classe ul li:before {  
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-size: 10px;
  background-image: url("lien-de-votre-fichier-média");
  background-repeat: no-repeat;
  margin-right: 10px;
  }
</style>

Vous pouvez ajouter ce code dans la partie dans la partie head (Inside <head> tag).

Step 4: Customize the code for your project

Now you just have to modify 2 parts of the above code. First of all, you will have to replace "class-name" (after ul. if list element or before ul if rich text) by the name of the class of your "List" element or of your Rich Text. If you want all the bulleted lists on your site to use the same media file, you can delete the following part of the code: ".name-of-your-class".

Then, you will have to replace "link-from-your-media-file" by the link of your media file. It is possible to retrieve the link directly from the assets by clicking on the mesh icon.

You can of course change the other CSS parameters as you wish.

custom code to personalize bulleted list style

Step 5: Publish your project

When all these steps have been completed, you can publish your project to see the rendering live. Indeed, you will not be able to see the rendering directly in Webflow unless you put the code in a Webflow embed element.