css - Font Awesome 5 muestra un cuadrado vacío cuando se usa la versión JS+SVG

font-awesome font-awesome-5

Question

Intento 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:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "/f058";
  margin: 0 5px 0 -15px;
  color: #004d00;
  display: inline-block;
}

<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>

Sé que la biblioteca de fuentes se está cargando porque pude usar <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> y la fuente se procesó correctamente (aunque no está diseñado correctamente).

Answer 1

Como se indica en los documentos de Font Awesome sobre cómo habilitar 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;
}

<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>

Answer 2

Usando la última versión de Font Awesome 5, puede habilitar el uso de pseudo-elementos con la versión JS agregando data-search-pseudo-elements como a continuación:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "/f058";
  display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
  color: blue;
  margin: 0 5px 0 -15px;
}

<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>

Puede consultar la documentation para más detalles:

Si está utilizando nuestro marco SVG + JS para representar iconos, debe hacer algunas cosas adicionales:

Habilitar pseudo elementos

Usar CSS Pseudoelementos para representar iconos está deshabilitado de manera predeterminada cuando se usa nuestro Framework SVG + JS. Deberá agregar el atributo <script data-search-pseudo-elements ... > al elemento <script /> que llama Font Awesome.

Establezca la visualización de Pseudoelementos en none

Dado que nuestro JS encontrará cada referencia de ícono (usando el estilo de su pseudo elemento) e insertará un ícono en el DOM de su página automáticamente, necesitaremos ocultar el pseudo elemento real creado por CSS que se renderiza.

Vieja respuesta

Como puede ver en esta pregunta Uso del ícono Font Awesome para viñetas, con un solo elemento de elemento de lista Puede configurar fácilmente el ícono usando contenido y pseudo-elemento, pero debe prestar atención ya que Font Awesome 5 está usando SVG y este truco ganó No funciona si utiliza la versión JS recomendada:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "/f058";
  margin: 0 5px 0 -15px;
  color: #004d00;
  display: inline-block;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>

Entonces, para obtener lo que desea, debe cargar la versión CSS que contiene la fuente y la forma antigua de usar los iconos:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome/ 5 Free";
  content: "/f058";
  margin: 0 5px 0 -15px;
  color: #004d00;
  display: inline-block;
}

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>