En este tutorial les mostraremos la manera de poner un icono en nuestros CSS, en pocas palabras seria agregar un icono de Font Awesome en CSS. Para ello podemos utilizar las Pseudo-class de nuestro CSS.

Pseudoelementos CSS 3nl61


Cuando cambiar el HTML en su proyecto no es una opción, podemos aprovechar una función de CSS para agregar iconos a una página. CSS tiene una característica poderosa conocida como Pseudo-elementos o Pseudo-class. Font Awesome ha aprovechado el pseudo-elemento ::before, para agregar iconos a una página desde el principio.
Un pseudo-elemento CSS es una palabra clave agregada a un selector que le permite diseñar una parte específica de los elementos seleccionados. Por ejemplo, ::first-line se puede usar para cambiar la fuente de la primera línea de un párrafo.
/*La primera línea de cada elemento <p>.*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Cómo trabajamos con los icono de Font Awesome 72113e


Ya hemos aprendido que Font Awesome usa clases como fa y fa- para mostrar íconos en su sitio. Dupliquemos la funcionalidad de estas clases y escribamos la nuestra.
<style>
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .linkedin::before {
    font-family: "Font Awesome 5 Brands"; font-weight: 900; content: "\f08c";
  }

  .facebook::before {
    font-family: "Font Awesome 5 Brands"; font-weight: 400; content: "\f09a";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
</style>

<ul style="margin: 0;">
  <li><span class="icon linkedin"></span> Linkedin</li>
  <li><span class="icon facebook"></span> Facebook</li>
  <li><span class="icon twitter"></span> Twitter</li>
</ul>
Esta es la manera de agregar el estilo a tu pagina:
<head>
<link href="/tu-estilo-de-fontawesome/css/all.css" rel="stylesheet"
<!--Manera de agregar el estilo de Font Awesome -->
</head>
<body>
  <i class="fas fa-"></i> <!-- usa estilo sólido-->
  <i class="far fa-"></i> <!-- usa estilo regular -->
  <i class="fal fa-"></i> <!-- utiliza estilo ligero -->
  <!--icono de marca-->
  <i class="fab fa-github-square"></i> <!-- utiliza estilo de marcas -->
</body>
--------------------------- O ----------------------------
<head>
  <script defer src="/tu-estilo-de-fontawesome/js/all.js"></script>
<!--cargar todos los estilos en jаvascript -->
</head>
<body>
  <i class="fas fa-"></i> <!-- usa estilo sólido-->
  <i class="far fa-"></i> <!-- usa estilo regular -->
  <i class="fal fa-"></i> <!-- utiliza estilo ligero -->
  <!--icono de marca-->
  <i class="fab fa-github-square"></i> <!-- utiliza estilo de marcas -->
</body>
Ver resultado

A continuación les mostramos otro ejemplo de Font Awesome versión 5.11, Esta es una demostración de cómo usar los nuevos iconos de Font Awesome versión 5.11
style>
 /* demo styling */
* {
  /* resetting the box model for all elements */
  box-sizing: border-box;
}

.demo-frame {
  /* making a nice frame/layout for examples */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: -1rem;
  padding: 3rem;
  min-height: 100vh;
  color: rgb(52, 58, 64);
}

.demo-example {
  /* individual demo example styling */
  margin-bottom: 1rem;
}

.demo-icon-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.demo-icon {
  margin: 0;
  padding: 1.5rem 1rem;
}
</style>
Ver resultado
Compartir

Mi nombre es Alexander fundador y CEO, y me gusta llamarme un Geek. Amo la informática, tecnología y todo lo que está relacionado con ella. Inicié este sitio con la intención de compartir conocimientos como cursos en línea, tutoriales y videotutoriales. Estoy muy entusiasmado con la información que he descubierto y compartido hasta el momento. La verdad es que lo he hecho con el mayor de los gustos. Así es, soy un Geek con una visión para compartir conocimiento. Leer mas... 2c611u