Inicia sesión




Como agregar un icono de Font Awesome en CSS

Como agregar un icono de Font Awesome en CSSEn 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>
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-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>
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

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web @font-face WebSite webmasters Noticias Tutorial

Como agregar un icono de Font Awesome en CSS
Como agregar un icono de Font Awesome en CSS Como agregar un icono de Font Awesome en CSS...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Mejoras en los graficos y tablas en Google App

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Google Apps Herramientas Ofimaticas Noticias Tutorial

Agujeros De Seguridad En Android, Facebook, Windows, Office, Internet Explorer, Adobe...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Noticias Adobe Tutorial Facebook Windows Herramientas Ofimaticas

Como diseñar trayectorias del movimiento en PowerPoint

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Herramientas Ofimaticas PowerPoint Microsoft Software Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial