Utilizzo dell'icona Font Awesome per i punti elenco, con un singolo elemento dell'elenco

Vorremmo essere in grado di utilizzare un'icona Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) come punto elenco per elenchi non ordinati in un CMS.

L'editor di testo sul CMS genera solo HTML non elaborato, pertanto non è possibile aggiungere ulteriori elementi / classi.

Questo significa visualizzare le icone quando il markup è simile al seguente:

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

Il primo problema posso vedere se Font Awesome richiede un diverso attributo della famiglia di caratteri, che richiederebbe un elemento separato.

È possibile usare CSS puro? O dovrei aggiungere l'elemento all'inizio di ogni elemento della lista usando qualcosa come jQuery?

Mi rendo conto che possiamo usare un fallback di un'immagine di sfondo, ma sarebbe bello usare Font Awesome se possibile.

Soluzione:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

Ecco un post sul blog che spiega questa tecnica in modo approfondito.

Il nuovo fontawesome (versione 4.0.3) lo rende davvero facile da fare. Usiamo semplicemente le seguenti classi:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

Secondo questo (nuovo) url: http://fontawesome.io/examples/#list

Vorrei basarmi su alcune delle risposte sopra riportate e fornite altrove e suggerire di utilizzare il posizionamento assoluto insieme alla pseudo-classe: before . Molti degli esempi precedenti (e in domande simili) utilizzano il markup HTML personalizzato, incluso il metodo di gestione di Font Awesome. Questo va contro la domanda originale e non è strettamente necessario.

DEMO QUI

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

È praticamente tutto. Puoi ottenere il valore ISO da utilizzare nel contenuto CSS sul cheat sheet Font Awesome . Usa semplicemente gli ultimi 4 caratteri alfanumerici con il prefisso. Così []diventa\f058

C'è un esempio di come utilizzare Font Awesome insieme a un elenco non ordinato nella loro pagina di esempi .

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

Se non riesci a trovarlo funzionante dopo aver provato questo codice, non stai includendo correttamente la libreria. Secondo il loro sito Web, è necessario includere le librerie in quanto tali:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Dai un'occhiata anche al capriccioso post di Chris Coyier sui font delle icone sul suo sito Web Trucchi CSS .

Ecco un suo screencast che parla anche di come creare la tua icona font-face.

@Tama, potresti voler controllare questa risposta: usando le icone Font Awesome come punti elenco

Fondamentalmente puoi farlo utilizzando solo CSS senza la necessità del markup extra come suggerito da FontAwesome e le altre risposte qui.

In altre parole, puoi ottenere ciò di cui hai bisogno usando lo stesso markup di base che hai citato nel tuo post iniziale:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Grazie.

La mia soluzione utilizza standard <ul>e <i>dentro<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

DEMO QUI

In Font Awesome 5 si può fare usando CSS puro come in alcune delle risposte sopra con alcune modifiche.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

Senza il corretto peso del carattere, mostrerà solo un quadrato vuoto.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define