Usted puede configurar el color de la fuente del icono, un color hover y el estilo de fondo de acuerdo a sus necesidades utilizando simple selector CSS a su marcado HTML. También hemos añadido clases adicionales para ofrecer soluciones de visualización óptimas.
Importante: Tenga en cuenta que si no se muestra ningún color al aplicar la clase necesaria, significa que la marca del icono tiene varios colores que no pueden reproducirse con las fuentes de los iconos. Esos iconos vuelven a un color negro por defecto.
Utiliza pe-hover para establecer el color de los iconos sociales y de marca en el activador CSS hover. Pasa el ratón por encima de los iconos para verlo en acción. Es genial para que los usuarios sepan cuando están en el objetivo del enlace. Puedes añadir pe-hover para dar más espacio a los iconos de poca anchura (opcional).
Añade pe-hover para establecer un color de fondo para los iconos sociales y de marca en el activador CSS hover. Pasa el ratón por encima de los iconos para verlo en acción. Es ideal para que los usuarios sepan cuándo están en el objetivo del enlace.
Añade pe-longshadow para aplicar un estilo de sombra larga a cualquier icono con fondo (es decir, pe-bg). Es necesario incluir también el archivo social-style-ls.css en el <head> de tu html. Para minimizar el tamaño del archivo recomendamos mantener sólo las clases de los iconos en uso.
Nota: Recuerde dejar un espacio después de la etiqueta de cierre del elemento icono (es decir, después de la etiqueta </i>), cuando se utilizan los iconos junto con las cadenas de texto como dentro de los botones o enlaces de navegación, para asegurarse de que hay un espacio adecuado entre el icono y el texto.
También puedes utilizar bibliotecas de iconos externas en Bootstrap. Una de las bibliotecas de iconos externas más populares y altamente compatibles con Bootstrap es Font Awesome. Proporciona más de 675 iconos que están disponibles en SVG, PNG, así como en formato de fuente web para una mejor usabilidad y escalabilidad.
1598+ Free Font Awesome Icons Class list Names & their CSS content valuesComplete list of 1598+ free font awesome iconsThis post contains complete free font awesome icons class list names with their CSS content value codes & step by step tutorial to use font awesome icons in HTML pages. In the latest font awesome 5.14 version we have around 1598 free icons.And these free font awesome icons divided into three categories.We can download font awesome icons css file and serve them from our own server Or we can serve them from public CDNs. And also I have created a free ebook which contains complete list of font awesome icons in PDF format.Table of ContentsWhat is font awesome?How to use font awesome icons?There are two ways we can use font awesome icons in our web applications.First we need to add font awesome icons css file in head section of the html file. Display font awesome icons using CSS class namesThe most common way of displaying font awesome icons is using their class names.For each and every icon a class name is prefefined, just we need add the fa icon name as class.font awesome icons uses italic tag i.e., <i></i> to display the icons.The reason behind using this <i> tag as icon isTo display the font awesome icons using css class names folow the steps.First we will add the font awesome icons css in head section of html file as shown below<head>
Este ejemplo utiliza una característica tipográfica llamada ligaduras, que permite la representación de un glifo de icono simplemente utilizando su nombre textual. La sustitución la realiza automáticamente el navegador web y proporciona un código más legible que la referencia de caracteres numéricos equivalente.
Encuentre los nombres de los iconos y los puntos de código en la biblioteca de iconos de material seleccionando cualquier icono y abriendo el panel de fuentes de iconos. Cada fuente de iconos tiene un índice de codepuntos en nuestro repositorio git que muestra el conjunto completo de nombres y códigos de caracteres (aquí).
Estos iconos fueron diseñados para seguir las directrices de diseño de materiales y se ven mejor cuando se utilizan los tamaños y colores de iconos recomendados. Los estilos que aparecen a continuación facilitan la aplicación de nuestros tamaños, colores y estados de actividad recomendados.
El uso de la fuente de los iconos permite estilizar fácilmente un icono en cualquier color. De acuerdo con las directrices sobre iconos del Material Design, para los iconos activos recomendamos utilizar el negro con una opacidad del 54% o el blanco con una opacidad del 100% cuando se muestren sobre fondos claros u oscuros, respectivamente. Si un icono está desactivado o inactivo, utilice el negro al 26% o el blanco al 30% para fondos claros y oscuros, respectivamente.