Eu queria adicionar à resposta de JOPLOmacedo. Sua solução é a minha favorita, mas sempre tive problemas com o recuo quando o li tinha mais de uma linha. Foi difícil encontrar o recuo correto com margens, etc. Mas isso pode me interessar.
Para mim, o posicionamento absoluto do :before
pseudo-elemento funciona melhor. I definido padding-left
em ul, posição negativa deixada sobre o :before
elemento, mesmo como ul de padding-left
. Para obter a distância :before
correta entre o conteúdo e o elemento, basta definir padding-left
o li. Claro que o li tem que ter uma posição relativa. Por exemplo
ul {
margin: 0 0 1em 0;
padding: 0 0 0 1em;
/* make space for li's :before */
list-style: none;
}
li {
position: relative;
padding-left: 0.4em;
/* text distance to icon */
}
li:before {
font-family: 'my-icon-font';
content: 'character-code-here';
position: absolute;
left: -1em;
/* same as ul padding-left */
top: 0.65em;
/* depends on character, maybe use padding-top instead */
/* .... more styling, maybe set width etc ... */
}
Espero que isso esteja claro e tenha algum valor para outra pessoa que não eu.