web-dev-qa-db-fra.com

Comment puis-je faire une échelle d'image de style liste avec la taille de police de la liste, lorsque nous ne pouvons pas utiliser de polices glyphes?

Une page Web sur laquelle je travaille utilise des chevrons fantaisie pour les puces dans une liste. Je voudrais définir un style de liste qui évolue avec la taille de la police des éléments de la liste elle-même: c'est le but ultime de mon problème ici.

Nous conservons actuellement ces chevrons dans des fichiers SVG (dont l'un est proposé ci-dessous) afin qu'ils puissent être agrandis sans être terribles. Ils sont référencés comme ceci:

ul.foo {
    list-style-image: url("../images/chevron.svg");
}

Nous utilisons ces listes de chevrons plusieurs fois chacune sur le site. Parfois, ils contiennent du texte volumineux, parfois avec du texte plus petit ou de taille normale. Nous sommes obligés de créer une nouvelle image en chevron pour chaque taille de police (par exemple chevron-small.svg, chevron-medium.svg, chevron-large.svg, etc.), mais il existe sûrement un meilleur moyen qui nous permet d'utiliser uniquement une image et de la faire évoluer de façon autonome en fonction de la taille de la police!

Cependant, je n'ai pas encore compris comment faire l'échelle de l'image avec la taille de la police.

Le wiki W3 pour list-style-image suggère que "si la largeur ou la hauteur intrinsèque de l'image est donnée en pourcentage, alors ce pourcentage est résolu par 1em", ce qui semble être exactement ce que nous voulons. Je n'ai pas encore trouvé comment y arriver. réponse de Brian Campbell à Comment puis-je faire une échelle svg avec son conteneur parent? semble suggérer un moyen de faire en sorte que ce pourcentage se produise, mais lorsque je règle une largeur ou une hauteur de 100%, les puces chevron apparaissent extrêmement minuscules ou pas du tout, même lorsque la taille de la police est grande.

Comment puis-je faire cette échelle d'image de style de liste entièrement avec la taille du texte, de sorte que lorsque la taille du texte d'une UL augmente, l'image de la puce le fasse aussi?

( Polices Glyphes: Nous ne pouvons pas les utiliser. Ils feraient le travail visuellement, mais ils ont un mauvais impact sur l'accessibilité parce que les lecteurs d'écran ont gagné ne lisez pas les puces comme des puces mais comme un autre caractère étrange. Nous pourrions éventuellement définir une police de glyphe personnalisée et remplacer les puces par les nôtres, mais la surcharge de taille de fichier serait excessive. Je peux dire, nous devons utiliser une image.)

Mon code SVG

Le SVG vient d'Illustrator et a ce code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="8px" height="14px" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">
<path fill="#666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321
    c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244
    C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205
    c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638"/>
</svg>

Ce qui apparaît comme suit, où le texte est de 16 pixels et le chevron n'est pas à l'échelle de la taille de la police, mais est décemment grand et visible (un peu plus grand que souhaité dans ce cas, mais ignorons cela, car l'image elle-même peut être édité):

Comme je l'ai dit, j'ai essayé de suivre réponse de Brian Campbell et de définir la propriété width ou height à 100%:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100%" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">

Cependant, avoir une largeur ou une hauteur définie à 100% semble rendre les chevrons minuscules et beaucoup plus petits que 1em, comme indiqué:

(Capture d'écran de Firefox. En Chrome ils sont un peu plus gros, bien plus petits que 16px.)

Extrait de code

/* 
The image referenced here is the SVG provided above, with base 64 encoding. It is the
freshly exported version that still has a defined width and height of 8px and 14px.
You may wish to just save the SVG above locally.
*/

ul {
  list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');
  /* Or if you wish to save the SVG locally:
  list-style-image: url('chevron.svg');
  */
}

.small-list {
   font-size: 85%;
}

.large-list {
  font-size: 150%;
}
<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

<ul class="large-list">
  <li>And larger for this list</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>
htmlcsshtml5svghtml-lists
35
doppelgreener

J'aborderais la résolution de ce problème en utilisant un pseudo-élément avant chaque li

Voici le balisage

ul {
    list-style: none;
}

li {
    position: relative;
}

li:before {
    /*
    The desired width gets defined in two places: The element width, and background size.
    The height only gets defined once, in background size.
    */
    position: absolute;
    display: block;
    content: '\2022'; /* bullet point, for screen readers */
    text-indent: -999999px; /* move the bullet point out of sight */
    left: -.75em;
    width: .4em; /* desired width of the image */
    height: 1em; /* unrelated to image height; this is so it gets snipped */
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');
    background-size: .4em .7em;
    background-position: 0 .3em;
}

.small-list {
    font-size: 85%;
}

.large-list {
    font-size: 150%;
}
<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>
    
<ul class="large-list">
  <li>And larger for this list</li>
  <li>Multiline list item<br>for testing</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

Explication:

  • Nous nous débarrassons d'abord des puces par défaut sur le ul
  • Ensuite, nous créons un pseudo-élément devant chaque li en utilisant le :before sélecteur et content: '\2022';
    • Le content: '\2022'; ajoute le puce unicode , •, pour que les lecteurs d'écran puissent le lire. Le retrait du texte le met bien hors de vue.
  • Nous appliquons ensuite un arrière-plan (chevron) aux pseudo-éléments et le dimensionnons à l'aide de quelques propriétés. L'essentiel ici est de s'assurer que les dimensions conservent le même rapport que le svg. Les dimensions sur le pseudo-élément sont définies à l'aide de em afin qu'elles s'ajustent proportionnellement lorsque le font-size est changé. Enfin, nous positionnons également l'arrière-plan où la balle aurait été.
    • background-size: .4em .7em; indique au navigateur de dimensionner l'arrière-plan de la façon dont l'image doit être dimensionnée, nous devons maintenir le rapport d'aspect correct ici.
    • background-position: 0 .3em; déplace l'image chevron en ligne avec le texte.
    • width: .4em; rend l'élément pseudo juste assez large pour s'adapter à l'image, et height: 1em; le fait correspondre à la hauteur de la ligne et être suffisamment haut pour s'adapter également au décalage.

Avertissement: - IE 8 ne prend pas en charge background-size, mais je suppose que ce ne sera pas un problème car il ne prend pas en charge le rendu svg.

28
mrkiffie

Dans le XML de votre image SVG, vous devez supprimer les attributs width et height, puis le SVG sera mis à l'échelle à 100% ou 1em du font-size

Voici la version base64 de votre image avec ceci fait:

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

Malheureusement, vous ne pouvez pas définir explicitement la taille d'un list-style-image, mais il existe une solution de piratage qui ne nécessite aucun autre HTML;

Si vos éléments LI ne contiennent qu'une seule ligne de texte (ce qui est souvent le cas avec les listes), vous pouvez utiliser le sélecteur css ::first-line pour augmenter ou diminuer la taille de votre police sans affecter votre image de style liste.

Donner cette solution alternative:

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%;
}
5
tonesforchris

Vous pouvez définir le svg dans votre css directement et changer la hauteur et la largeur au besoin, pas très SEC, mais ça marche:

.small-list {
  font-size: 85%;
  list-style-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14" width="6" height="9"><path fill="%23666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638" /></svg>');
}
.large-list {
  font-size: 150%;
  list-style-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14" width="8" height="14"><path fill="%23666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638" /></svg>');
}
<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

<ul class="large-list">
  <li>And larger for this list</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

Ou vous pouvez l'assécher un peu en utilisant le svg comme image d'arrière-plan plutôt que comme image de style liste. Notez que placer le svg dans le css n'est pas nécessaire ici:

ul {
  list-style: none;
  padding-left: 0;
}
li {
  padding-left: .65em;
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14"><path fill="%23666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638" /></svg>')no-repeat scroll 0% 50% /.65em .65em transparent;
}
.small-list li {
  font-size: 85%;
}
.large-list li {
  font-size: 150%;
}
<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>
<ul class="large-list">
  <li>And larger for this list</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>
3
apaul

Cela utilise votre svg comme image d'arrière-plan pour le contenu :: before, dimensionné en utilisant em pour le garder la même taille que la police. L'image sera juste plus petite que la même taille que le texte, quelle que soit la taille du texte ou si vous effectuez un zoom avant ou arrière.

ul.foo,
ul.foo li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.foo li {
  height: 1em;
}
ul.foo li:before {
  content: "";
  background-image: url(http://imgh.us/chevron_1.svg);
  background-size: .5em .5em;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 50%;
  margin-top: -.175em;
  width: .5em;
  height: .5em;
}
<ul class="foo">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
<ul class="foo" style="font-size: 2em">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
2
user4639281

Vous pouvez utiliser SVG comme image intégrée:

<img src="chevron.svg" alt="chevron-icon" class="my-icon" />

* CSS

.my-icon{
    width:50px;
    height:auto;
}

Un article utile:

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

Pour une meilleure compatibilité du navigateur, je recommande de convertir vos fichiers SVG en police, vous pouvez le faire ici:

https://icomoon.io/

Ou utilisez une police prédéfinie comme FontAwesome:

http://fontawesome.io/

Ici, vous obtiendrez l'icône dont vous avez besoin:

http://fontawesome.io/icon/chevron-right/

Implémentez FontAwesome avec:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Mais je vous recommande fortement de télécharger les fichiers source au lieu d'utiliser man dans les fichiers intermédiaires.

Et ajoutez ceci CSS: 

ul{
    list-style:none;
    color:#888;
    font-size:24px;
}

ul li:before{
    font-family: FontAwesome;
    content:"\f054";
}

[~ # ~] html [~ # ~] 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Vous pouvez obtenir un aperçu ici:

http://jsfiddle.net/a1vkeg6c/1/

De cette façon, vous aurez le même support rétinien de SVG que vous voulez, et même de manière plus pratique.

J'espère avoir été utile!

1
Rodrigo Calix