HTML - cambiar color ionic icon

 
Vista:
sin imagen de perfil
Val: 6
Ha disminuido su posición en 18 puestos en HTML (en relación al último mes)
Gráfica de HTML

cambiar color ionic icon

Publicado por milton (2 intervenciones) el 17/07/2020 18:46:36
Buen día

Soy nuevo en esto de la maquetacion en html y css. Y estoy teniendo un problema al cambiar el color de un icono de ionic icons que son las 3 rayas del menú cuando se ve en dispositivos móviles. Estoy usando igual bootstrap, ya lo intente como dicen en la pagina de poner en el CSS:

1
2
3
ion-icon {
  color: blue;
}


Pero simplemente no cambia de color, ya lo probé en diferentes navegadores pero simplemente no se ve, aunque cuando entro en inspeccionar elemento me muestra que supuesta mente tiene el color.

Creo que tiene que ver con que use bootstrap

si me pueden ayudar, les agradeceria mucho, ya que es proposito de pandemia hacer mi sitio web desde cero.

1
2
3
4
5
6
7
<body>
     <nav class="navbar navbar-expand-lg fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#"><img src="imagenes/mm.jpg" alt="milton medina" class="rounded-circle" id="logomilton"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <ion-icon name="menu-outline"></ion-icon>
        </button>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

cambiar color ionic icon

Publicado por Martha (137 intervenciones) el 19/07/2020 12:39:33
Hola,

Siguiendo las instrucciones de la página del proyecto: https://ionicons.com/usage https://ionicons.com/usage he hecho una plantilla html5 para Bootstrap y funciona.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="es">
<head>
	<title>Ion-icon</title>
	<!-- Hojas de Estilo -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<style>@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
	body{
		font-family: 'Open Sans', sans-serif;
	}
	ion-icon {
		color: green;
	}
	</style> <!--open sans font para quién no lo tenga instalado -->
 
</head>
<body>
<ion-icon name="heart"></ion-icon> <!--filled--> <br />
<ion-icon name="heart-outline"></ion-icon> <!--outline--> <br />
<ion-icon name="heart-sharp"></ion-icon> <!--sharp-->
 
 
 
 
 
 
 
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
</body>
</html>

Así es que asegurate de que tienes esta línea:

1
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>

justo antes de </body> y que la CSS apunta realmente a dónde tengas el archivo CSS, o bien antes de </head> metes una pareja de etiquetas <Style> para poner el estilo del color del icono.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 6
Ha disminuido su posición en 18 puestos en HTML (en relación al último mes)
Gráfica de HTML

cambiar color ionic icon

Publicado por milton (2 intervenciones) el 21/07/2020 01:52:41
Gracias si era eso... no sabia que tenia que estar justo anter de terminar body
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

cambiar color ionic icon

Publicado por brayan (1 intervención) el 13/01/2022 22:11:03
fácil compañero, solo tienes establecer la ruta de tu ion-icon, como por ejemplo el tuyo debería estar de la siguiente forma:
div button ion-icon{color: red;}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar