indentare <li> quando si una un iconfont come bullet point

[liviasettantuno]

Buondì, avrei questo problema e chiedo gentilmente l'aiuto di qualcuno!!!
Ho un elenco e volendo personalizzare il bullet point, ho pensato di utilizzare un'icon font.

il codice html è

<ul class="icon">
<li><i class="icon-circle"></i>Reception and check of incoming materials (tapes and/or files, both SD and HD)</li>
<li><i class="icon-circle"></i>Creation of low-resolution files to be provided toour translation team</li></ul>

il codice CSS è

ul.icon { list-style-type:none;}
li {padding:5px 0;}
i.icon-circle {color:#fa911b; padding-right:5px; font-size:0.8em;}

E andrebbe bene ma io vorrei che il testo, laddove capita su più righe, venisse indentato come nella foto che allego
allineare-testo.jpg

Non so quale regola dare e a chi darla!!

Qualcuno mi sa aiutare?
Grazie infinite!!!

Livia

[Mich_]

Anzitutto evita di usare tag deprecati (il tuo <i>): non sai mai come verranno interpretati dai vari browser.
Se proprio, dal punto di vista semantico dovresti usare uno <span>.

Comunque nel tuo caso non serve. Basta che metti l'immagine nello sfondo del <li> senza ripeterlo.
Poi devi settare anche un padding-left sufficiente per lascaire lo spazio dell'immagine (e questo risolve il problema di cui alla tua richiesta)

[liviasettantuno]

Anzitutto evita di usare tag deprecati (il tuo <i>): non sai mai come verranno interpretati dai vari browser.
Se proprio, dal punto di vista semantico dovresti usare uno <span>.

Comunque nel tuo caso non serve. Basta che metti l'immagine nello sfondo del <li> senza ripeterlo.
Poi devi settare anche un padding-left sufficiente per lascaire lo spazio dell'immagine (e questo risolve il problema di cui alla tua richiesta)

Innanzitutto grazie per la risposta Mich, però quello che tu mi rispondi non è in linea con la mia domanda.
Ok sul discorso del <i> anche se non avevo detto che sto lavorando con l'hml 5 e per quel che ne so è un tag che è stato riabilitato. Poi credevo che lavorando con le icon font non dovessi comportarmi come se avessi a che fare con un'immagine ma come un font. Però è proprio per questo che non so come comportarmi.

Se poi mi dici che la soluzione al mio cruccio si risolve solo inserendo un'immagine, allora vado ad a fare qual che mi dici!!
Grazie in anticipo

[micheleraponi]

credevo che lavorando con le icon font non dovessi comportarmi come se avessi a che fare con un'immagine ma come un font.

Dai un'occhiata qui: http://fortawesome.github.io/Font-Aw...examples/#list

[ResianTaxidrive]

Forse riesci a fare quello che vuoi con una cosa del genere

li:before {
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
  font-family: FontAwesome;
   content: "\f095";
}

e togliendo il tag <i>

[MAeSI]

@liviasettantuno

Ciao, se non hai ancora risolto, prova ad aggiungere un margin-left negativo alla classe icon-circle


Edit: scusa Mod, non ti ho letto

[liviasettantuno]

Grazie a tutti! ho risolto con la soluzione offertami da Resian Taxdrive. Ho aggiunto poi un margin left a i <li> per indentare anche il bullet point.

Grazie e buon lavoro a tutti!!