0

buen día compañeros, tengo un problema, la verdad es que a la parte de diseño no le se mucho, ahorita lo que quiero es acomodar un icono al lado de un texto. pero no me deja. y en lugar de ponerlo a un lado lo pone arriba del texto. sale así. introducir la descripción de la imagen aquí

pero quiero que salga.

el icono de la casa y a un lado el texto home.

el código lo tengo asi.

 <li class="nav-item">
                    <span class="fi fi-rr-home">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </span>
                </li>

todo eso lo tengo dentro de otra clase.

<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">

ustedes que tienen más experiencia ¿me pueden ayudar, por favor :) ??

mi codigo completo es este

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
                aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Sistema PDF</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">

                    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                        <div>
                            <span class="fi fi-rr-home"></span>
                        </div>
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                Dropdown
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="d-flex mt-3" role="search">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>

1
  • 1
    podes poner el html completo? Commented el 17 mar. 2023 a las 16:19

2 respuestas 2

2

Tu 'Home' ocupa toda la linea ya que es un elemento en bloque por defecto, agregale la clase d-inline y se arregla

  <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
    <li class="nav-item">
      <span>
        <i class="fa-solid fa-phone"></i>
        <a class="nav-link active d-inline" aria-current="page" href="#">Home</a>
      </span>
    </li>
  </ul>

Después tu elemento que contiene el icono está envolviendo el elemento del enlace a home, es preferible que estén separados, tal y como puse acá

2
  • ohhhh sii ya funciono :) muchas gracias Commented el 17 mar. 2023 a las 16:37
  • @lemuelAyanotfuentesAyala de nada! Commented el 17 mar. 2023 a las 16:43
0

intenta creando un <div> que contenga el <span> y el <a> pero sin que el <a> este dentro del <span>, tambien lo podes intentar sin crear el div

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.