CSS - Ícono no aparece en navbar

 
Vista:
Imágen de perfil de Jhon
Val: 25
Ha aumentado su posición en 25 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Jhon (10 intervenciones) el 29/07/2020 11:39:28
Hola, uso Bootstrap 4, en un navbar he incluido un ícono, pero no puedo verlo

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
61
62
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <script src="https://kit.fontawesome.com/yourcode.js"></script>
    <title>Navbar Template · Bootstrap</title>
 
    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/navbars/">
 
    <!-- Bootstrap core CSS -->
<link href="../assets/dist/css/bootstrap.css" rel="stylesheet">
 
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
 
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="alwaysExpandStyles.css" rel="stylesheet">
  </head>
  <body>
 
 
<nav class="navbar navbar-expand navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Always expand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarsExample02">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="#"><span class="sr-only"><i class="fas fa-car" style="font-size:36px;color:white;"></i>></i></span></a>
        </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Categorías</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Productos</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-md-0">
      <input class="form-control" type="text" placeholder="Search">
    </form>
  </div>
</nav>

Es la primera opción, el primer li... pero no puedo verlo... hay algún problema con fontawesome ?
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 Kathyu
Val: 111
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Kathyu (26 intervenciones) el 29/07/2020 13:48:24
Varios errores

1
<i class="fas fa-car" style="font-size:36px;color:white;"></i>></i>

1- Tiene varios cierres
2- Use fa en vez de fas al inicio

reemplace por
1
<i class="fa fa-car" style="font-size:36px;color:white;"></i>

Y lo que hace que no aparezca es la clase sr-only del span donde lo mete, si quita esa clase ya se ve bien. No se que tenga esa clase o para que la ocupe pero eso es lo que no hace que aparezca y tambien los errores que ya mencione antes.
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
Val: 25
Ha aumentado su posición en 25 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Jhon (10 intervenciones) el 29/07/2020 16:42:57
No... sigue sin aparecer

Estos son los estilos q tiene... aunque no es mucho
1
2
3
4
5
6
7
8
9
body {
    padding-bottom: 20px;
 
}
 
.navbar {
    margin-bottom: 20px;
    border-style: solid;
}
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 Kathyu
Val: 111
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Kathyu (26 intervenciones) el 29/07/2020 17:58:23
Yo bajé su código y lo probé y lo hice aparecer osea si le digo que se ve es porque se ve

PERO... hice unos pequeños cambios

1- Puse con CDN Bootstrap
2- Puse con CDN FontAwesome

Porqué? lógico, no tengo sus archivos de estilo personalizados después de eso lo único que hice para que apareciera fue lo de mi primer respuesta

Le adjunto 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
2
Comentar
Imágen de perfil de Jhon
Val: 25
Ha aumentado su posición en 25 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Jhon (10 intervenciones) el 30/07/2020 06:46:31
Hola Kathyu (si es tu nombre, es muy raro) no es que no te creyera, simplemente lo ejecuté y lo manipulé luego y aún no se veía... si dices que pusiste unos cdns entonces tal vez eso faltaba.

Te agradezco mucho tu ayuda.
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 Kathyu
Val: 111
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Kathyu (26 intervenciones) el 30/07/2020 12:32:24
(¬_¬) Es un nickname de internet caballero, y proviene de mi nombre Katherine.

Pues ya le envié el código y le tuvo que haber funcionado, así que vuelvo a decir lo que ya dije, que muy probable su código personalizado tenga algo 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 Jhon
Val: 25
Ha aumentado su posición en 25 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Jhon (10 intervenciones) el 30/07/2020 13:24:46
Tienes como un problema de actitud no?

Yo no dije que no funcionó, de hecho quise decir lo opuesto... por eso te agradecí.
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 Kathyu
Val: 111
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Kathyu (26 intervenciones) el 30/07/2020 14:35:11
Simplemente no ando con rodeos, eso no es problema de actitud, problema es creer que se debe hablar queriéndole gustar todo el mundo

Me alegra que, aun con mi "problema de actitud" le solvente su duda

Por cierto para la próxima, con un simple "GRACIAS" es suficiente...
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
Imágen de perfil de Jhon
Val: 25
Ha aumentado su posición en 25 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Jhon (10 intervenciones) el 07/09/2020 20:06:50
Bueno no vi más comentarios del post luego de ver lo que escribiste... hasta ahora, bajé tú código y no funciona.

Solo con un gracias cuando la actitud sea la adecuada.

Debería haber un moderador que sancionara gente así.

Lo resolví, cambié el primer a por el segundo y se resolvió

1
<a class="nav-link" href="#"><span ><i class="fa fa-car" style="font-size:36px;color:white;"></i></span></a>
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 Lopez
Val: 109
Bronce
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Lopez (31 intervenciones) el 08/09/2020 02:34:45
Hola Jhon,

Espero todo bien y me alegro se resolviera tu duda.
Estoy de acuerdo contigo, se necesitan varios moderadores y reglas de publicación por ejemplo,
Pero en este caso no es necesario, fue solo un mal entendido.

El código que te adjunto la compañera Kathyu funciona perfecto.
Imagino puede ser estás probando offline, ya que las librerías son llamadas a su cdn y necesitan una conexión.

X7Zxk0W

Quedamos para ayudarte,
Saludos!
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 Kathyu
Val: 111
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ícono no aparece en navbar

Publicado por Kathyu (26 intervenciones) el 09/09/2020 12:23:10
Yo resolví, que tu no seas capaz de poder siquiera ejecutar el código para ver la solución, no es problema mio.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-3
Comentar