Font Awesome 6: Revisión completa
- 1 Cómo instalar Font Awesome
- Método 1.
- Método 2.
- 2 Cómo usar iconos impresionantes de fuentes
- 1 iconos estándar
- 2 íconos grandes
- 3 iconos de ancho fijo
- 4 iconos para la lista de balas
- 5 iconos y citas enmarcadas
- 6 íconos animados
- 7 íconos transformados
- 8 íconos de combinación
- 3 Font Awesome 4.5.0 collection, classes ycss code to insert using the content property
- 4 recursos relacionados
- Tamaño de ícono
- Color de icono
- Preguntas Frecuentes
Font Awesome es una colección de iconos vectoriales escalables. Los iconos se pueden formatear con propiedades CSS, establecer su color, tamaño, sombra y mucho más. La versión 5.5.0 incluye 605 iconos.
1 Cómo instalar Font Awesome
Método 1.
Use la versión de Font-Awesome.css del archivo agregando el siguiente código al<head> sección:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Una vez que la fuente está conectada, puede usar los iconos en su sitio.
Método 2.
Descargue la fuente de Font Awesome . Desempaqué el archivo y cargue dos carpetas desde el archivo al servidor del sitio: CSS y fuentes. Si ya tiene carpetas con tales nombres en su sitio, solo necesita agregar archivos de las carpetas descargadas a ellos.
Puede usar la versión completa o minificada del archivo:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Cómo usar iconos impresionantes de fuentes
Los iconos se pueden agregar a una página web de dos maneras: estableciendo las clases apropiadas para el<i> y<span> elements, oby adding them to the desired element using the :before, :after pseudo-elements ythe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: antes {contenido: "\ f015";/ * Agregar icono de inicio */FONT-FAMILY: FONTAWESE; COLOR: #AAAAAA; margen-derecha: 10px;}1 iconos estándar
Font Awesome está diseñado para usarse con elementos en línea. Para agregar iconos, primero debe establecer la clase FA en el<i> o<span> elemento.
Para agregar el icono seleccionado antes o después del elemento, un vacío<i></i> o<span></span> El elemento se agrega al elemento, a la que se le asigna una clase de icono, así como una clase adicional que extiende el estilo.
<i class="fa fa-camera-retro"></i>2 íconos grandes
Para aumentar el tamaño de un icono en relación con su contenedor, use las clases FA-LG (33% de aumento), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 iconos de ancho fijo
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation olists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Hogar</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Biblioteca</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aplicaciones</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Ajustes</a ></li></ul>4 iconos para la lista de balas
Use las clases FA-UL y FA-LI para reemplazar las balas predeterminadas en un<ul>…</ul> lista con viñetas.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Artículo de la lista</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Artículo de la lista</li> <li><i class="fa-li fa fa-square"></i>Artículo de la lista</li></ul>5 iconos y citas enmarcadas
Use the fa-border class to set the border for the icon. The pull-right ypull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec Nec Purus Congue, Posuere Libero en, Porta Sapien. En sed elit lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congine Sapien.</p>6 íconos animados
Agregue las clases FA-SPIN, FA-Pulse, FA-Frensh, FA-COG para configurar los iconos giratorios. La animación no es compatible en IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 íconos transformados
Para rotar o voltear los iconos, use las clases FA-Rotate-* y FA-FLIP-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 íconos de combinación
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, yfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes ycss code to insert using the content property
Iconos para aplicaciones web FA -ADJUST - \ F042;Fa -anchor - \ f13d;
FA Archive - \ F187;
Fa -Arrows - \ f047;
Fa -terisk - \ f069;
Faat - \ f1fa;
FA-Balance-Scale-\ F24E;
Fa -ban - \ f05e;
FA -Bank - \ F19c;
FA -BARCODE - \ F02A;
FA-Battery-Epty-\ F244;
FA-Battery-Half-\ F242;
FA-Battery-Quarter-\ F243;
FA-Battery-Tres-Quarters-\ F241;
FA-Battery-Full-\ F240;
FA -BED - \ F236;
FA -Beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
FA -Binoculares - \ F1E5;
FA-Birthday-Cake-\ f1fd;
FA -Bolt - \ f0e7;
FA -Bomb - \ f1e2;
Fa -libro - \ f02d;
Para rotar o voltear los iconos, use las clases FA-Rotate-* y FA-FLIP-*.
4 recursos relacionados
Además de la colección Font Awesome, también puedes usar otras fuentes de iconos.
Fontello.Fontello tiene una gran colección de varias fuentes de iconos. Puede seleccionar los iconos que le guste y descargarlos a su computadora.
Icono de la Fundación.Foundation Icon es otra colección de fuentes de iconos de los desarrolladores del marco de la Fundación. Además de los íconos estándar, el sitio presenta íconos redondos, iconos de redes sociales y más.
íconos de material.Los íconos de materiales son los iconos planos unificados de Google que encarnan la facilidad de percepción. Los iconos están optimizados para una hermosa pantalla en todas las plataformas comunes y para todas las resoluciones de pantalla.
La colección de fuentes de icono contiene más de 750 iconos. La forma más fácil de instalar una colección en su sitio web es usar iconos como Google Web Fonts. Para hacer esto, el siguiente código se incluye en el marcado de la página:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Para mostrar correctamente la fuente en los navegadores, el elemento que usará la fuente de iconos recibe la clase Material-íconos:
.material-íconos {Font-Family: 'Iconos de material'; Font-peso: estilo de fuente normal: tamaño de fuente normal: 24px; / * Tamaño del icono preferido */ Display: Inline-Block; Ancho: 1em; Altura: 1em; Línea de altura: 1; Texto-transformación: ninguno; Espaciado de letras: Word Word-Wrap: Normal; White-Space: Nowrap; Dirección: LTR; -Webkit-font-smoothing: antialiased; / * Compatible con todos los navegadores WebKit */ Renderización de texto: Optimizelegibility; / * Soporte de Safari y Chrome */ -MOZ-OSX-FONT SMOUTTING: GrayScale; /* Soporte de Firefox. */ font-free-settings: 'liga'; /* Es decir, soporte. */}Los íconos mismos se agregan usando el<I class=''material-íconos''>ligadura o código HTML del icono</i> Etiqueta, por ejemplo:
<i class="material-íconos">cuenta_balance_wallet</i><i class="material-íconos"></i>Todos los navegadores modernos entienden la ligadura, es decir, a partir de la versión 10. El código de icono se genera automáticamente, para esto debe hacer clic izquierdo en la imagen del icono y copiar el aspecto sugerido.
Tamaño de ícono
Tamaño de ícono is controlled by additional classes:
.material-íconos.md-18 {font-size: 18px;} /* para<i class="material-íconos md-18"></i> */.material-íconos.md-24 {font-size: 24px;} /* para<i class="material-íconos md-24"></i> */.material-íconos.md-36 {font-size: 36px;} /* para<i class="material-íconos md-36"></i> */.material-íconos.md-48 {font-size: 48px;} /* para<i class="material-íconos md-48"></i> */Color de icono
El color de los iconos también se establece utilizando clases adicionales:
.material-íconos.md-dark {color: rgba (0, 0, 0, 0.54);} /*<i class="material-íconos md-dark"></i> */.material-íconos.md-light {color: rgba (255, 255, 255, 1);} /*<i class="material-íconos md-light"></i> */.material-íconos.md-dark.md-inactive {color: rgba (0, 0, 0, 0.26);} /*<i class="material-íconos md-dark md-inactive"></i> * /.material-íconos.md-light.md-inactive {color: rgba (255, 255, 255, 0.3);} /*<i class="material-íconos md-light md-inactive">cara</i> */Para establecer un color personalizado, debe agregar una clase que define el color del icono, por ejemplo:
.material-íconos.indigo {color: #1a237e;} /*<i class="material-íconos indigo"></i> */Preguntas Frecuentes
- ¿Qué es la fuente impresionante en términos simples?
- En esencia, es una fuente con íconos que se pueden agregar a cualquier elemento de página web para mejorar su visibilidad y diseño. La colección consta de varios cientos de íconos adecuados para cualquier tarea y propósito.Más información sobre este enlace.
Michel Pinson es un entusiasta de los viajes y creador de contenido. Fusionando la pasión por la educación y la exploración, se compromete a compartir conocimiento e inspirar a otros a través de cautivando contenido educativo. Al reunir al mundo en empoderar a las personas con experiencia global y un sentido de pasión por los viajes.
