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:
Estilo Bootstrap Glyficon
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