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
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
Ya hemos aprendido que Font Awesome usa clases como fa y fa-user 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-user"></i> <!-- usa estilo sólido-->
<i class="far fa-user"></i> <!-- usa estilo regular -->
<i class="fal fa-user"></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-user"></i> <!-- usa estilo sólido-->
<i class="far fa-user"></i> <!-- usa estilo regular -->
<i class="fal fa-user"></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>
Comentarios