react-icons placed below the content, but want to place beside

Question

I am using to show down arrow in my navbar dropdown. So the list item of unordered list is:

<li>
          <div className="dropdown">
            <button className="dropbtn">Accessories <FiChevronDown />
            </button>
            <div className="dropdown-content">
              <NavLink to="/category/golf-balls">Golf Balls</NavLink>
              <NavLink to="/category/golf-shoes">Golf Shoes</NavLink>
              <NavLink to="/category/golf-accessories">Golf Accessories</NavLink>
            </div>
          </div>
        </li>

So, is there any way to put that icon on the right side of "Accessories" word? Thanks

score 0 · Answer 1 · answered Apr 01 '23 at 16:13

Oh, I just get the answer.

<li>
          <div className="dropdown">
            <button className="dropbtn">Accessories
            <span className="icon"><FiChevronDown /></span>
            </button>
            <div className="dropdown-content">
              <NavLink to="/category/golf-balls">Golf Balls</NavLink>
              <NavLink to="/category/golf-shoes">Golf Shoes</NavLink>
              <NavLink to="/category/golf-accessories">Golf Accessories</NavLink>
            </div>
          </div>
        </li>

and css

.dropbtn {
  background-color: transparent;
  color: #333;
  font-size: 16px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.icon {
  margin-left: 0.5rem;
}

It will add flex property in my code and get the things done.

react-icons placed below the content, but want to place beside

1 Answers1