La sostituzione FontAwesome sul tag mostra il quadrato vuoto

Tentativo di sostituire il tipo di punto elenco su un tag di elenco con un’icona Font Awesome ma sto ottenendo un quadrato vuoto:

HTML

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5

CSS

 ul { list-style: none; } .testitems { line-height: 2em; } .testitems:before { font-family: "FontAwesome"; content: "\f058"; margin: 0 5px 0 -15px; color: #004d00; display: inline-block; } 

So che la libreria dei font si sta caricando perché sono stato in grado di usare

  • List Item 1
  • e il font reso correttamente (sebbene non sia stato disegnato correttamente).

    Aggiornamento 2018

    Usando l’ultima versione di font-awesome (5.2) puoi abilitare l’uso di pseudo-elementi con la versione di JS aggiungendo data-search-pseudo-elements come di seguito:

     ul { list-style: none; } .testitems { line-height: 2em; } .testitems:before { font-family: "Font Awesome 5 Free"; content: "\f058"; font-size:0; /* To hide it*/ } /*target the svg for styling*/ .testitems svg { color: blue; margin: 0 5px 0 -15px; } 
      
    • List Item 1
    • List Item 2
    • List Item 3
    • List Item 4
    • List Item 5

    Come indicato nei documenti di Font Awesome su come abilitare la Pseudo class …

     ul { list-style: none; } .testitems { line-height: 2em; } .testitems::before { font-family: "Font Awesome 5 Solid"; content: "\f058"; display: none; } .user::before{ font-family: "Font Awesome 5 Solid"; content: "\f007"; display: none; } 
       
    • List Item 1
    • List Item 2
    • List Item 3
    • List Item 4
    • List Item 5

    User