DEMO #3

Embedded Lists using a MARKDOWN embed

Here, coloring is applied using CSS that targets the SVG image element.

  • + Full control. You can do any constructions and any level of nesting depth you like.
  • + Renders immediately in the final site.
  • - Cannot see in the designer.
  • - Must edit HTML

Embedded lists, using Markdown.

Here, the list contents are placed in an HTML Embed element as Markdown. The Markdown is processed into HTML by WFU.

Some text here - a list - goes here - indented - more indented - level 1 done with list.

‍

How to implement

Use the Video link in the top menu for a complete walkthrough.

01 The basic process

Find a black colored SVG you want to use.

Add it to your Webflow site...

  • Import it into to your site assets.
  • Create an Image element on your canvas, and link the SVG.
  • Assign a Class Selector to your Image element

Determine your CSS Filter Settings

  • Choose the color you want your SVG to be, and get the RGB HEX value.
  • Determine your filter settings using this tool.

Add your CSS to your Site

  • Use your Image element's Class Selector as the CSS selector
  • Paste in the filter CSS from the tool

02 Tips and best practices

  • Your base SVG should be solid black
  • Ideally, place the CSS STYLE code in your site HEAD, or page HEAD

03 Finding your SVG icon

I personally like flaticon, where every icon is available as SVG. Here are 3 of the best black-icon style groups.

‍