Ajustar a posição da imagem no estilo da lista?

Existe uma maneira de ajustar a posição da imagem no estilo de lista?

Quando uso preenchimento para itens da lista, a imagem permanece em sua posição e não se move com preenchimento ...

Na verdade não. Seu preenchimento (provavelmente) está sendo aplicado ao item da lista, portanto, afetará apenas o conteúdo real dentro do item da lista.

O uso de uma combinação de estilos de fundo e preenchimento pode criar algo parecido, por exemplo

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

Você pode adicionar estilo ao contêiner da lista pai (ul) para posicionar os itens da lista com marcadores, este artigo A List Apart tem uma boa referência inicial.

Normalmente, oculto o tipo de lista e uso uma imagem de plano de fundo móvel

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

O "7px 7px" é o que alinha a imagem de plano de fundo dentro do elemento e também é relativo ao preenchimento.

Uma possível solução para essa pergunta que ainda não foi mencionada é a seguinte:

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

Agora você pode usar a parte superior / esquerda do li: before para posicionar o novo marcador. Observe que a largura e a altura do li: before precisam ter as mesmas dimensões que a imagem de fundo escolhida. Isso funciona no Internet Explorer 8 e superior.

Eu tinha o mesmo problema, mas não podia usar a opção em segundo plano (e não queria usar vários fundos), então pensei em outra solução

este é um exemplo de menu que possui um indicador de quadrado para o item de menu ativo / atual (o estilo de lista padrão é definido como nenhum em outra regra)

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

ele cria um quadrado usando um caractere quadrado com a pseudo classe ": before" e é livremente posicionável usando posicionamento absoluto.

Aqui está o que eu fiz para colocar pequenos blocos cinza no lado esquerdo e no centro do texto com uma altura de linha aumentada:

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

Espero que isso ajude alguém: D

A solução que decidi no final foi modificar a própria imagem para adicionar algum espaçamento.

O uso de uma imagem de plano de fundo na li, como alguns sugerem, funciona em muitos casos, mas falha quando a lista é usada ao lado de uma imagem flutuada (por exemplo, para fazer o texto envolver a imagem).

Espero que isto ajude.

Outra opção que você pode fazer é a seguinte:

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

Use (0 3px) para posicionar a imagem da lista.

Funciona no IE8 +, Chrome, Firefox e Opera.

Eu uso essa opção porque você pode trocar o estilo de lista facilmente e uma boa chance de nem precisar usar uma imagem. (violino abaixo)

http://jsfiddle.net/flashminddesign/cYAzV/1/

ATUALIZAR:

Isso levará em conta o texto / conteúdo entrando na segunda linha:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

Adicione padding-left: ao li se desejar mais espaço entre o marcador e o conteúdo.

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

Ou você pode usar

list-style-position: inside;

Eu acho que o que você realmente deseja fazer é adicionar o preenchimento (atualmente você está adicionando ao <li>) à tag <ul> e, em seguida, os marcadores serão movidos com o texto do <li>.

Há também a posição de estilo de lista em que você pode procurar. Afeta como as linhas se agrupam em torno das imagens dos marcadores.

como resposta "a darren", mas pequenas modificações

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

funciona em vários navegadores, basta ajustar o preenchimento e a margem

Editar para aninhado: adicione este estilo para adicionar margem esquerda à lista sub-aninhada

ul ul {margem esquerda: 15 px; }

Estou usando algo como isto, parece bastante limpo e simples para mim:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

O código acima funciona como na maioria dos meus casos.
Para um ajuste exato, você pode modificar vertical-align, por exemplo:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

Você pode ativar list-style: noneem livez de, ulse preferir.

Eu acho a resposta aceita um pouco de falsificação, também deve ser empurrada com comandos extras de preenchimento e css.

Eu nunca adiciono preenchimento para listar itens pessoalmente, normalmente controlando a altura da linha e a margem ocasional é suficiente.

Quando tenho um problema de alinhamento com imagens de estilo de lista personalizadas, adiciono apenas um pixel ou dois de espaço extra ao redor do lado necessário para ajustar sua posição em relação a cada linha da lista.

solução com fontawesome

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}

Oculte a imagem de marcador padrão e use background-image como você tem muito mais controle, como:

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}

<ul>
<li>foo</li>
<li>bar</li>
</ul>