Icon and links on the same line in mobile view with Tailwind CSS?-CodePudding

I am trying to get the icons on the left side of the links. But in mobile view one or more icons shows on wrong line instead of beside the link. What should I do? Tailwind CSS or CSS might be possible to fix this. Help appreciated.

Code:

  <div >
    <a >
    <Link to="/">
      <h1 >Gaming News</h1></Link>
    </a>
    <span >The latest gaming news</span>
    <nav >
    <SiNintendoswitch/><Link  to="/Nintendo">Nintendo</Link>
     <FaPlaystation/><Link  to="/Playstation">Playstation</Link>
     <FaXbox/><Link  to="/Xbox">Xbox</Link>
       <HiDesktopComputer/><Link  to="/PC">PC</Link>
      <SiRetroarch/><Link  to="/Retro">Retro</Link> 
      <GiRetroController/><Link  to="/Indie">Indie</Link>
    </nav>
  </div>
</header>

CodePudding user response：

I believe that what you need to do is to put both the Icon and its Link inside a div tag and give a className of flex, that way they will be a single unit and will always move together. Like so:

 <div className="justify-center p-5 items-center">
      <a className="flex justify-center title-font font-medium items-center text-gray-900">
        <Link href="/">
          <h1 className="ml-3 text-3xl text-center text-gray-500 hover:text-gray-400">
            Gaming News
          </h1>
        </Link>
      </a>
      <span className="mt-2 mb-2 flex flex-wrap justify-center items-center ml-3 text-sm text-gray-500">
        The latest gaming news
      </span>
      <nav className="md:ml-4 md:py-4 md:pl-4 flex flex-wrap items-center text-base justify-center">
        <div className="flex">
          <Icons.AcademicCap />
          <Link className="ml-1 mr-5 hover:text-gray-400" href="/Nintendo">
            Nintendo
          </Link>
        </div>
        <div className="flex">
          <Icons.Archive />
          <Link
            className="ml-1 mr-5 hover:text-gray-400"
            href="/Playstation"
          >
            Playstation
          </Link>
        </div>
        <div className="flex">
          <Icons.AcademicCap />
          <Link className="ml-1 mr-5 hover:text-gray-400" href="/Xbox">
            Xbox
          </Link>
        </div>
        <div className="flex">
          <Icons.DesktopComputer />
          <Link className="ml-1 mr-5 hover:text-gray-400" href="/PC">
            PC
          </Link>
        </div>
        <div className="flex">
          <Icons.Wifi />
          <Link className="ml-1 mr-5 hover:text-gray-400" href="/Retro">
            Retro
          </Link>
        </div>
        <div className="flex">
          <Icons.AcademicCap />
          <Link className="ml-1 mr-5 hover:text-gray-400" href="/Indie">
            Indie
          </Link>
        </div>
      </nav>
    </div>

I hope this helps.