CSS list-style-image size

Question

J'essaie de définir des icônes SVG personnalisées à l'aide d'une feuille de style (CSS) sur une page d'accueil. <ul> Les éléments de la liste de Exemple :

<ul>
    <li style="list-style-image: url('first.svg')">This is my first item</li>
    <li style="list-style-image: url('second.svg')">And here's my second</li>
</ul>

Le problème est que les images sont trop grandes et dépassent la hauteur des lignes. Je ne veux pas changer la taille de l'image, car l'intérêt d'utiliser SVG est de s'adapter à la résolution. Existe-t-il un moyen de définir la taille de l'image à l'aide de CSS sans avoir recours à une sorte d'outil de gestion de l'image ? background-image hack ?

EDIT : Voici un aperçu (grande image délibérément choisie pour l'illustration et la dramatisation) : http://jsfiddle.net/tWQ65/4/
Et mon projet actuel background-image en utilisant la fonction background-size : http://jsfiddle.net/kP375/1/

Answer 1

Comme si je trichais, je suis allé dans un éditeur d'images et j'ai redimensionné l'image de moitié. Cela a fonctionné comme un charme pour moi.

Answer 2

.your_class li {
  list-style-image: url('../images/image.svg');
}

.your_class li::marker {
  font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}

Answer 3

Il s'agit d'une réponse tardive, mais je la mets ici pour la postérité.

Vous pouvez modifier le svg et définir sa taille. L'une des raisons pour lesquelles j'aime utiliser les svg est qu'ils peuvent être modifiés dans un éditeur de texte.

Ce qui suit est un exemple de 32 32 svg que j'ai redimensionné en interne pour qu'il s'affiche initialement comme un 10 10 image. Il a parfaitement fonctionné pour remplacer l'image de la liste

<?xml version="1.0" ?><svg width="10" height="10"  id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>

J'ai ensuite simplement ajouté ce qui suit à mon code CSS

* ul {
  list-style: none;
  list-style-image: url(../images/chevron-right.svg);
}

En list-style: none; est important car il empêche l'affichage de l'image de liste par défaut pendant le chargement de l'image alternative.

Answer 4

Voici un exemple pour jouer avec SVG en ligne pour une liste de puces (2020 Browsers)

list-style-image: url("data:image/svg+xml,
                      <svg width='50' height='50'
                           xmlns='http://www.w3.org/2000/svg' 
                           viewBox='0 0 72 72'>
                        <rect width='100%' height='100%' fill='pink'/>
                        <path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3
                                 l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30
                                 m-54 24v-24h9v24z'/></svg>")

• Jouer avec SVG width & height pour définir la taille
• Jouer avec M70 42 pour positionner la main
• comportement différent sur FireFox ou Chromium !

• retirer le rect

  li{ font-size:2em; list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z'/></svg>"); }

  span{ display:inline-block; vertical-align:top; margin-top:-10px; margin-left:-5px; }

  <ul> <li><span>Apples</span></li> <li><span>Bananas</span></li> <li>Oranges</li> </ul>

Answer 5

Essayez ceci

ul {
list-style: none;
}

li::before {
content: '';
display: inline-block;
height: 20px;
width: 20px;
background-size: contain;
background-image: url("icons_res/feature_star.svg");
margin-right: 5px;
}