Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Barra de redes sociales sin íconos

HTML - Barra de redes sociales sin íconos

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Jhon Jairo
Val: 7
Ha disminuido su posición en 5 puestos en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por Jhon Jairo (4 intervenciones) el 05/07/2018 04:20:19
Hola, estoy siguiendo un tutorial donde se crea una barra de redes sociales, pero no se ven los íconos
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
 
<body>
	<div class="social">
		<ul>
			<li><a href="http://www.facebook.com/falconmasters" target="_blank" class="icon-facebook"></a></li>
			<li><a href="http://www.twitter.com/falconmasters" target="_blank" class="icon-twitter"></a></li>
			<li><a href="http://www.googleplus.com/falconmasters" target="_blank" class="icon-googleplus"></a></li>
			<li><a href="http://www.pinterest.com/falconmasters" target="_blank" class="icon-pinterest"></a></li>
			<li><a href="mailto:contacto@falconmasters.com" class="icon-mail"></a></li>
		</ul>
	</div>
</body>
</html>

estilos.css
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
.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
	.social ul {
		list-style: none;
	}
 
	.social ul li a {
		display: inline-block;
		color:#fff;

		background: #000;

		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter {background: #00abf0;}

	.social ul li .icon-googleplus {background: #d95232;}

	.social ul li .icon-pinterest {background: #ae181f;}

	.social ul li .icon-mail {background: #666666;}

 
	.social ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}

Muchas gracias a quien pueda decirme que pasa y como puedo solucionarlo
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
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por xve (1543 intervenciones) el 05/07/2018 09:01:33
Hola Jhon, creo que el problema esta en que no tienes definido el tamaño donde mostrar color de fondo...

añade esto a tus estilos:
1
.social a {width:20px;height:20px;}

Coméntanos, ok?
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
Imágen de perfil de Jhon Jairo
Val: 7
Ha disminuido su posición en 5 puestos en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por Jhon Jairo (4 intervenciones) el 06/07/2018 01:40:19
Lo cambié pero no se solucionó
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
.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
 .social a {width:20px;height:20px;}
 
	.social ul {
		list-style: none;
	}
 
	.social ul li a {
		display: inline-block;
		color:#fff;

		background: #000;

		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter {background: #00abf0;}

	.social ul li .icon-googleplus {background: #d95232;}

	.social ul li .icon-pinterest {background: #ae181f;}

	.social ul li .icon-mail {background: #666666;}

 
	.social ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}
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
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por xve (1543 intervenciones) el 06/07/2018 08:48:39
Hola Jhon, yo simplemente he juntando tu archivo html con tu hoja de estilos, y me ha funcionado perfectamente!!!

Lo que veo, son los recuadros de las redes sociales, y al ponerme encima, crecen hacia la derecha... es correcto?

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
 
<body>
	<div class="social">
		<ul>
			<li><a href="http://www.facebook.com/falconmasters" target="_blank" class="icon-facebook"></a></li>
			<li><a href="http://www.twitter.com/falconmasters" target="_blank" class="icon-twitter"></a></li>
			<li><a href="http://www.googleplus.com/falconmasters" target="_blank" class="icon-googleplus"></a></li>
			<li><a href="http://www.pinterest.com/falconmasters" target="_blank" class="icon-pinterest"></a></li>
			<li><a href="mailto:contacto@falconmasters.com" class="icon-mail"></a></li>
		</ul>
	</div>
</body>
</html>
 
<style>
.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
.social a {width:20px;height:20px;}
 
.social ul {
    list-style: none;
}
 
.social ul li a {
    display: inline-block;
    color:#fff;

    background: #000;

    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}
 
.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
.social ul li .icon-twitter {background: #00abf0;}

.social ul li .icon-googleplus {background: #d95232;}

.social ul li .icon-pinterest {background: #ae181f;}

.social ul li .icon-mail {background: #666666;}

 
.social ul li a:hover {
    background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
    padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}
</style>
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
Imágen de perfil de Jhon Jairo
Val: 7
Ha disminuido su posición en 5 puestos en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por Jhon Jairo (4 intervenciones) el 06/07/2018 08:53:00
Uso el tuyo y no se ven los íconos, ensayé en Firefox y tampoco... ¿Qué podrá ser?
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
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por xve (1543 intervenciones) el 06/07/2018 11:43:37
Yo veo esto en el navegador

redes-sociales

Es esto lo que tengo que ver?
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
Imágen de perfil de Juan C.
Val: 22
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por Juan C. (8 intervenciones) el 05/07/2018 12:30:13
Hola Jhon, ¿Conseguiste solucionarlo?

Si aun no, puedes escribire a mi emai: [email protected],
te adjunto una imagen de tu pagina al hacer unas correcciones.

botones_redes_sociales
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
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por xve (1543 intervenciones) el 05/07/2018 18:14:44
Hola JuanC, podrías publicar el código?
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
Imágen de perfil de Juan Carlos
Val: 22
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por Juan Carlos (8 intervenciones) el 06/07/2018 16:21:55
Hice unas correcciones tu código y se ve todo bien, puedes descargar el código resultante en la siguiente pagina, es el codigo 5:
http://ciencia123.byethost10.com/codes
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Jhon Jairo
Val: 7
Ha disminuido su posición en 5 puestos en HTML (en relación al último mes)
Gráfica de HTML

Barra de redes sociales sin íconos

Publicado por Jhon Jairo (4 intervenciones) el 07/07/2018 00:10:52
Sí, ahora funciona.

Hombre, demasiada publicidad para un enlace de un tutorial.

Quitaste
1
2
3
font-size: 20px;
      height: 20px;
      width: 25px;

de
.social ul li a

Así queda el código que 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
 
  <style>
    .social {
      position: fixed; /* Hacemos que la posiciÃģn en pantalla sea fija para que siempre se muestre en pantalla*/
      left: 0; /* Establecemos la barra en la izquierda */
      top: 200px; /* Bajamos la barra 200px de arriba a abajo */
      z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algÚn otro elemento como sliders, galerías, etc */
    }
 
    .social ul {
      list-style: none;
    }
 
    .social ul li a {
      display: inline-block;
      color:#fff;

      background: #000;

      padding: 10px 15px;
      text-decoration: none;
      -webkit-transition:all 500ms ease;
      -o-transition:all 500ms ease;
      transition:all 500ms ease; /* Establecemos una transiciÃģn a todas las propiedades */
      font-size: 20px;
      height: 20px;
      width: 25px;
    }
 
    .social ul li .fa-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
    .social ul li .fa-twitter {background: #00abf0;}

    .social ul li .fa-google-plus {background: #d95232;}

    .social ul li .fa-pinterest {background: #ae181f;}

    .social ul li .icon-mail {background: #666666;}

 
    .social ul li a:hover {
      background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
      padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
    }
  </style>
 
</head>
 
<body>
	<div class="social">
		<ul>
			<li><a href="http://www.facebook.com/falconmasters" target="_blank" class="fa fa-facebook"></a></li>
			<li><a href="http://www.twitter.com/falconmasters" target="_blank" class="fa fa-twitter"></a></li>
			<li><a href="http://www.googleplus.com/falconmasters" target="_blank" class="fa fa-google-plus"></a></li>
			<li><a href="http://www.pinterest.com/falconmasters" target="_blank" class="fa fa-pinterest"></a></li>
			<li><a href="mailto:contacto@falconmasters.com" class="icon-mail fa fa-envelope"></a></li>
		</ul>
	</div>
</body>
</html>
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