Dado un documento HTML con un glyphicon de Bootstrap relevante, la tarea es aplicarles el color personalizado.
Enfoque: Primero, debemos asignar el atributo id al glyphicon particular que necesita personalizar usando CSS. Podemos aplicar la propiedad de color a la identificación particular y cambiar el color del ícono usando un valor hexadecimal o un color normal.
El id es un atributo que se utiliza para acceder a la etiqueta completa. El color es la propiedad de un elemento, que se utiliza para cambiar el color del elemento específico, toma el valor como un valor hexadecimal o nombre de color.
Sintaxis:
#id_name { color: red; }
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> <style> #red_e { color: red; } #blue_e { color: blue; } #green_e { color: green; } #yellow_e { color: yellow; } #cyan_e { color: cyan; } </style> </head> <body> <div class="container"> <h2>Glyphicon Icons Styling</h2> <a href="#"> <span class="glyphicon glyphicon-envelope" id="red_e"> Red Envelope Icon</span> </a> <br> <a href="#"> <span class="glyphicon glyphicon-envelope" id="blue_e"> Blue Envelope Icon</span> </a> <br> <a href="#"> <span class="glyphicon glyphicon-envelope" id="green_e"> Green Envelope Icon</span> </a> <br> <a href="#"> <span class="glyphicon glyphicon-envelope" id="yellow_e"> Yellow Envelope Icon</span> </a> <br> <a href="#"> <span class="glyphicon glyphicon-envelope" id="cyan_e"> Cyan Envelope Icon</span> </a> <br> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por gurunadhpukkalla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA