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


131

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.

Risposte:


248

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.


18
Un utile elenco di traduzioni da queste fantastiche icone di font ai valori CSS è qui: astronautweb.co/snippet/font-awesome
Scott C Wilson

24
Ti consigliamo di includerlo per rimuovere i punti ul { list-style-type: none; }
elenco

Perché questo metodo non funziona quando ho due elenchi nella stessa pagina?
deKajoo,

6
Molto bello, l'unica cosa che suggerirei di allineare le cose meglio è usare margin: 0 0.2em 0 -1.2em;solo aumentare / diminuire i due valori della stessa quantità per ottenere la spaziatura desiderata. Se si utilizza un valore di pixel fisso che non corrisponde correttamente al carattere, si noterà una discrepanza negli elementi dell'elenco multilinea.
Frena il

Ho aggiunto un prefisso ul a questo, altrimenti proverebbe a farlo se il client usasse il cms per creare un elenco ordinato (numerato)
rtpHarry

154

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


12
Questa dovrebbe essere la risposta corretta, con la nuova versione fa. Molto ben fatto, grazie per questa spiegazione.
David,

23
Non sono d'accordo, la domanda ha chiesto una soluzione utilizzando un unico elenco in puro CSS. Questo utilizza HTML aggiuntivo, oltre alle classi. Mentre questo è sicuramente il modo in cui i documenti di FA specificano di fare questo, non è tecnicamente la soluzione alla domanda, e non è utile se stai cercando di farlo senza modificare il tuo output HTML.
Ryan,

So cosa stai cercando, ma le persone che non scrivono costantemente CSS puro in situazioni in cui non possono modificare il loro HTML ???? (seriamente, per favore, guarda come cambiare il tuo framework web) avrà bisogno del loro aggiornamento della memoria delle query di Google per collegarsi al modo "corretto" di documenti fantastici, giustapposto con la risposta "reale", uno accanto all'altro per decidere. Non intendo dire "non c'è una sola risposta corretta al problema" ma non c'è ...
lol

1
Questo approccio non funziona bene con gli elementi elenco che si spostano su più righe, poiché l'identificazione su righe aggiuntive non si espanderà per includere la larghezza dell'icona.
Lars Haugseth,

2
Probabilmente vale la pena aggiungere, con FA 4.3 (probabilmente anche altre versioni) e Bootstrap 3, gli elementi ule lidevono essere impostati position: relativepoiché l' fa-lielemento è posizionato in modo assoluto. Altrimenti, fluttueranno tutti in alto a sinistra.
Jeremy Harris,

14

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ì [&#xf058;]diventa\f058


4

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.


2
Non è necessario il markup aggiuntivo: li:beforepuò avere una famiglia di caratteri diversa dalla listessa.
cimmanon,

@cimmanon: Anche se hai ragione, la documentazione per Font Awesome suggerisce che dovresti avere il markup extra. Tecnicamente non è necessario, tuttavia, penso che potrebbe essere necessario scavare tra i glifi del carattere per scoprire quale chiave è mappata su quale simbolo. Ciò richiederebbe un po 'di tempo e pazienza, ma sicuramente anche la tua soluzione funzionerebbe.
cereallarceny,

@cereallarceny - il problema che abbiamo è l'editor HTML (TinyMCE) per il CMS che produce il formato che ho dato alla mia domanda. Quindi da quel punto di vista non abbiamo il controllo sull'elenco HTML. A meno che non configuriamo TinyMCE per includere l'elemento i (e non eliminarlo come elemento vuoto).
BaronGrivet,

Quindi non hai accesso all'HTML, hai accesso al CSS?
cereallarceny,

Sì, accesso completo al CSS.
BaronGrivet,

1

@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.


1

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>

inserisci qui la descrizione dell'immagine

DEMO QUI


1

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.