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


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




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






Trading en Tacones – Mujeres empoderadas con las inversiones

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-05
  • Categorias: Forex Noticias Tutorial

Como agregar un icono de Font Awesome en CSS

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

Iconos sociales para Datalife engine y para cualquier sitio Web

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

Cursos que aún ofrecen certificados gratuitos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-26
  • Categorias: Cursos Noticias Tutorial Aprendizaje

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial