El reemplazo de FontAwesome en la etiqueta muestra el cuadrado vacío

Intentando reemplazar el tipo de viñeta en una etiqueta de elemento de lista con un icono de Font Awesome pero obtengo un cuadrado vacío:

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; } 

Sé que la biblioteca de fonts se está cargando porque pude usar

  • List Item 1
  • y la fuente procesada correctamente (aunque no tiene el estilo adecuado).

    Actualización 2018

    Usando la última versión de font-awesome (5.2) puede habilitar el uso de pseudo-elemento con la versión JS al agregar data-search-pseudo-elements como se muestra a continuación:

     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

    Como se indica en los documentos de Font Awesome de cómo habilitar la clase Pseudo …

     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