Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
  • Smartphone
    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Ciberseguridad: ¡Descubre cómo mantenerte seguro!

    Ciberseguridad: ¡Descubre cómo mantenerte seguro!

    Bing y Edge Mobile ahora tienen la nueva experiencia de vista previa, y Bing también está disponible en Skype

    Bing y Edge Mobile ahora tienen la nueva experiencia de vista previa, y Bing también está disponible en Skype

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo los entusiastas de la tecnología están haciendo realidad sus visiones del futuro

    Cómo los entusiastas de la tecnología están haciendo realidad sus visiones del futuro

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Ciberseguridad: ¡Descubre cómo mantenerte seguro!

    Ciberseguridad: ¡Descubre cómo mantenerte seguro!

    Bing y Edge Mobile ahora tienen la nueva experiencia de vista previa, y Bing también está disponible en Skype

    Bing y Edge Mobile ahora tienen la nueva experiencia de vista previa, y Bing también está disponible en Skype

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo ver la contraseña WiFi en su computadora u ordenador

    Cómo ver la contraseña WiFi en su computadora u ordenador

    Aumenta el rendimiento de tu PC con el overclocking

    Aumenta el rendimiento de tu PC con el overclocking

    Mantén tu PC antigua al día con Windows 11

    Mantén tu PC antigua al día con Windows 11

    Ciberseguridad: ¡Descubre cómo mantenerte seguro!

    Ciberseguridad: ¡Descubre cómo mantenerte seguro!

    La tecnología de las tragaperras: cómo funcionan

    La tecnología de las tragaperras: cómo funcionan

    DuckDuckGo lanzó su propio asistente con IA

    DuckDuckGo lanzó su propio asistente con IA

    Aumenta el rendimiento de tu PC con el overclocking

    Aumenta el rendimiento de tu PC con el overclocking

    Aprovecha al máximo el motor de búsqueda de Microsoft Bing con su bot de IA

    Aprovecha al máximo el motor de búsqueda de Microsoft Bing con su bot de IA

    Aumenta el rendimiento de tu PC con el overclocking

    Aumenta el rendimiento de tu PC con el overclocking

    Mantén tu PC antigua al día con Windows 11

    Mantén tu PC antigua al día con Windows 11

    ¿Por qué mi PC Lenovo se está apagando y reiniciando sola? ¿Qué está causando esto?

    ¿Por qué mi PC Lenovo se está apagando y reiniciando sola? ¿Qué está causando esto?

    Todo sobre los juegos para PlayStation 5: Lo que debes saber

    Todo sobre los juegos para PlayStation 5: Lo que debes saber

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Ciberseguridad: ¡Descubre cómo mantenerte seguro!

    Ciberseguridad: ¡Descubre cómo mantenerte seguro!

    Google está tomando medidas para asegurar que Android y Play Store sean más seguros

    Google está tomando medidas para asegurar que Android y Play Store sean más seguros

    TrueCrypt

    TrueCrypt

    El papel de la IA en las apuestas y los juegos de azar ya en la actualidad

    El papel de la IA en las apuestas y los juegos de azar ya en la actualidad

    DuckDuckGo lanzó su propio asistente con IA

    DuckDuckGo lanzó su propio asistente con IA

    Aprovecha al máximo el motor de búsqueda de Microsoft Bing con su bot de IA

    Aprovecha al máximo el motor de búsqueda de Microsoft Bing con su bot de IA

    Bing y Edge Mobile ahora tienen la nueva experiencia de vista previa, y Bing también está disponible en Skype

    Bing y Edge Mobile ahora tienen la nueva experiencia de vista previa, y Bing también está disponible en Skype

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    ¿Por qué necesitas un entrenador personal?

    ¿Por qué necesitas un entrenador personal?

    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    Nutrición positiva. Productos que estimulan la alegria y buen humor diario

    Nutrición positiva. Productos que estimulan la alegria y buen humor diario

    Hábitos que dañan tu piel y que debes evitar

    Hábitos que dañan tu piel y que debes evitar

    Maneras de mostrar amor por ti mismo

    Maneras de mostrar amor por ti mismo

    ¿Qué es el Snus? Una guía para principiantes

    ¿Qué es el Snus? Una guía para principiantes

    Cómo aprovechar el tiempo libre para mejorar tu salud mental y física

    Cómo aprovechar el tiempo libre para mejorar tu salud mental y física

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo peinar tu peluca frontal y pelucas de cabello humano según los expertos

    Cómo peinar tu peluca frontal y pelucas de cabello humano según los expertos

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK Facebook

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Diseño Web » Como agregar un icono de Font Awesome en CSS

Como agregar un icono de Font Awesome en CSS


Por administrador En: Diseño Web, @font-face, WebSite, webmasters, Noticias, Tutorial 0

5.5К
VISTO
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Compartir
Facebook Twitter LinkedIn Pinterest Email
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
Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte
Síguenos en Síguenos en Google News
Articulo anterior Inseguridad en Microsoft Office 3...
Articulo siguiente Trading en Tacones – Mujeres em...
¿Te gusto la informacion?

Si te gustó la publicación, apóyanos compartiendo en tus redes sociales o dejanos tu comentario.

  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
administrador
administrador
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: 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...
Tutoriales en línea

Post Relacionados

Efectos jQuery - Ocultar y mostrar

Efectos jQuery - Ocultar y mostrar

Cómo analizar el rendimiento del sitio web con Lighthouse

Cómo analizar el rendimiento del sitio web con Lighthouse

Complemento jQuery para mostrar el mensaje de consentimiento de GDPR

Complemento jQuery para mostrar el mensaje de consentimiento de GDPR

Atributos de paginación: link rel=next y rel=prev Para DataLife Engine

Atributos de paginación: link rel=next y rel=prev Para DataLife Engine

Enlaces a las noticias siguientes y anteriores dentro en las noticias completa del CMS de DataLife Engine

Enlaces a las noticias siguientes y anteriores dentro en las noticias completa del CMS de DataLife Engine

Tendencias en diseño web para este 2020

Tendencias en diseño web para este 2020


Comentarios



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

Destacados

El papel de la IA en las apuestas y los juegos de azar ya en la actualidad

El papel de la IA en las apuestas y los juegos de azar ya en la actualidad

23-Marzo
La tecnología de las tragaperras: cómo funcionan

La tecnología de las tragaperras: cómo funcionan

22-Marzo
Cómo ver la contraseña WiFi en su computadora u ordenador

Cómo ver la contraseña WiFi en su computadora u ordenador

20-Marzo
Cómo los entusiastas de la tecnología están haciendo realidad sus visiones del futuro

Cómo los entusiastas de la tecnología están haciendo realidad sus visiones del futuro

12-Marzo

Últimas publicaciones

Google Drive vs Dropbox ¿Quién gana?

Google Drive vs Dropbox ¿Quién gana?

Por J.A. M.A. (J.A.M.) 23-03-23
¿Qué es el Snus? Una guía para principiantes

¿Qué es el Snus? Una guía para principiantes

Por Tutoriales En Linea 23-03-23
El papel de la IA en las apuestas y los juegos de azar ya en la actualidad

El papel de la IA en las apuestas y los juegos de azar ya en la actualidad

Por Tutoriales En Linea 23-03-23

Etiquetas

Font Awesomefont-faceTutoriales En LineaArticulosIconosPostFuenteTutorialesNoticiasDiseñoDiseñadores WebWebsiteIconos SocialesAgregarElemento





Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.