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

You could define the svg in your css directly and change the height and width as needed, not very DRY, but it works:

.small-list {
  font-size: 85%;
  list-style-image: url('data:image/svg+xml;utf8,');
}
.large-list {
  font-size: 150%;
  list-style-image: url('data:image/svg+xml;utf8,');
}

  
The goal is to make the chevron smaller for this list
  
Specifically, just slightly smaller than capital letters, as stated.
  
Nomas matas
  
Roris dedit



  
And larger for this list
  
Nomas matas
  
Roris dedit

Or you could dry it out a little by using the svg as a background image rather than as a list style image. Note that placing the svg in the css isn't necessary here:

ul {
  list-style: none;
  padding-left: 0;
}
li {
  padding-left: .65em;
  background: url('data:image/svg+xml;utf8,')no-repeat scroll 0% 50% /.65em .65em transparent;
}
.small-list li {
  font-size: 85%;
}
.large-list li {
  font-size: 150%;
}

  
The goal is to make the chevron smaller for this list
  
Specifically, just slightly smaller than capital letters, as stated.
  
Nomas matas
  
Roris dedit


  
And larger for this list
  
Nomas matas
  
Roris dedit