How can I make a list-style-image scale with the list's font size, when we can't use glyph fonts?

Question

A webpage I\'m working on uses some fancy chevrons for bullet points in a list. I\'d like to define a list style that scales with the font size of the list items itself: doi

Answer 1

In your SVG image XML you must remove the width and height attributes, and then the SVG will scale to be 100% or 1em of the font-size

Here is the base64 version of your image with this done:

list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+');

Unfortunately you cannot explicitly set the size of a list-style-image, however there is one hack solution which doesn't require any further HTML;

If your LI elements only contain a single line of text (which is quite often the case with lists) then you can use the css selector ::first-line to scale your font-size up or down without affecting your list-style-image.

Giving this alternative solution:

ul {
  list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+');
}

.small-list {
  font-size: 140%;
}
.large-list {
  font-size: 350%;
}

.small-list li::first-line,
.large-list li::first-line{
 font-size: 70%;
}