Uso dell’icona Font Awesome per i punti elenco, con un singolo elemento dell’elemento della lista

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

L’editor di testo sul CMS emette solo HTML non elaborato, pertanto non è ansible aggiungere ulteriori elementi / classi.

Questo significa visualizzare le icone quando il markup appare in questo modo:

  • Item 1
  • Item 2
  • Item 3

Il primo problema che posso vedere è che Font Awesome richiede un attributo font-family diverso, che richiederebbe un elemento separato.

È ansible utilizzare puro CSS? O dovrei aggiungere l’elemento all’inizio di ogni elemento della lista usando qualcosa come jQuery?

Mi rendo conto che possiamo usare un ritorno all’indietro di un’immagine di sfondo, ma sarebbe bello usare Font Awesome se ansible.

Soluzione:

http://jsfiddle.net/VR2hP/

 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) rende questo davvero facile da fare. Usiamo semplicemente le seguenti classi:

 
  • List icons (like these)
  • can be used
  • to replace
  • default bullets in lists

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

Mi piacerebbe build su alcune delle risposte di cui sopra e dato altrove e suggerisco di utilizzare il posizionamento assoluto insieme a : before pseudo class . Molti degli esempi sopra riportati (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; } 

Questo è fondamentalmente. È ansible ottenere il valore ISO per l’utilizzo nei contenuti CSS nel cheatheet Font Awesome . Basta usare gli ultimi 4 caratteri alfanumerici con una barra rovesciata. Quindi [] diventa \f058

C’è un esempio di come usare Font Awesome insieme a una lista non ordinata nella loro pagina degli esempi .

 
  • Lists
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs

Se non riesci a trovarlo funzionante dopo aver provato questo codice, non includerai la libreria correttamente. Secondo il loro sito web, dovresti includere le librerie come tali:

   

Scopri anche il bizzarro post di Chris Coyier sui caratteri icona sul suo sito Web Trucchi CSS .

Ecco uno screencast che parla anche di come creare il proprio carattere di carattere.

@ Tomà, potresti voler controllare questa risposta: Usare le icone Font Awesome come punti elenco

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

In altre parole, puoi realizzare ciò di cui hai bisogno usando lo stesso codice di base che hai menzionato nel tuo post iniziale:

 
  • ...
  • ...
  • ...

Grazie.

La mia soluzione utilizzando standard

    e all’interno di

  •   
    • Paypal
    • Apple Pay
    • Stripe
    • VISA

    inserisci la descrizione dell'immagine qui

    DEMO QUI

    Sto usando http://icomoon.io/ Ti dà la possibilità di caricare solo le icone dei font che ti servono. Scegli le icone che desideri, attacca la chiave dell’icona e scarica un font piccolo anziché l’intero font fantastico (che è ancora fantastico).

    Ecco il mio esperimento: http://jsfiddle.net/Annett/ZB7TK/