svg icon unordered list

[marek]

hi,
one of the main benefits why i use font for icons is that i can use icons for unordered list.
however there are some techniques of using svg that I like much more. this for example https://css-tricks.com/mega-list-svg-information/…
but is there any way to use svgs as an icons for a unordered lists?

[Paulie_D]

It’s not clear what you are asking for but anywhere you would have used an image or icon font, you could use an SVG.

Either an actual SVG image or an actual SVG element (however you do that).

[shaneisme]

Sure, just use the list-style-image property.

[marek]

Sorry if it was not clear what I was asking.
I have recently designed a lot of landing pages. I make them responsive, and I also like to change font size with media queries.
Bullet points are important element of landing pages so I use svg icons like check marks to draw more attention to them.

this is the scss code I use

    .icon-list li{
      list-style-type: none;
      &:before {
        font-family: 'fontello';
        display: inline-block;
        font-size: 1em;
        line-height: 0;
        margin-left: - 1.5em;
        width: 1.5em;
        color: $primary-color;
        content: '\e800';
      }
}

this works good for different font sizes.
with list-style-image property svg icon has only one size that does not change with font size.

[Paulie_D]

If, instead of using images, you use actual SVG elements with dimensions set in em you would get the same effect.

Chris did some articles on this

https://css-tricks.com/svg-sprites-use-better-icon-fonts/

https://css-tricks.com/icon-fonts-vs-svg/

https://css-tricks.com/svg-symbol-good-choice-icons/

[Author]

Posts