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