Home Why are my icons for the dropdown button going under the word itself, if I haven't set a<br> anywhere?

Questions

Why are my icons for the dropdown button going under the word itself, if I haven't set a<br> anywhere?

November 18, 2021

So I am working on a little web-design project, and for that I made a dropdown button, which will display a list of options to choose from once hovered / clicked on, as well as added a feature that when the dropdown button is hovered over / clicked it will display an arrow icon facing up, and when it’s not active / hovered over / clicked it will display an arrow icon facing down.

My issue is that for some reason those icons are going in another row, below the text "Filters", I’ve as well tried to make the width of the button bigger, since I thought that might fix it, but nothing, the button will get wider, but the icons will remain where they we’re.

Here is my code for the dropdown:

button {
  padding: 15px;
  background: #0084FF;
  color: #fff;
  outline: none;
  border: none;
  transition: .2s;
  margin-bottom: 5px;
}

button:hover {
  cursor: pointer;
  background: #006eff;
  transition: .2s;
}

button a {
  color: #fff;
  text-decoration: none;
}

button a:hover {
  text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #eeeded;
  min-width: 160px;
  z-index: 9999;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.dropdown-content a {
  color: #0084FF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #0084FF;
}

.dropbtn #down {
  display: block;
}

.dropbtn #up {
  display: none;
}

.dropbtn:hover #down {
  display: none;
}

.dropbtn:hover #up {
  display: block;
}

.dropbtn:active #down {
  display: none;
}

.dropbtn:active #up {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="https://kit.fontawesome.com/a3f36ff0b4.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="images/T3C.png" />
  <title>Website</title>
</head>

<body>

  <div class="docs-body">

    <div class="dropdown">
      <button class="dropbtn" title="Filter">Filters <i id="down" class="fas fa-caret-down"></i> <i id="up" class="fas fa-caret-up"></i></button>
      <div class="dropdown-content">
        <a href="#web-dev"><i class="fas fa-ellipsis-h"></i> Option 1</a>
        <a href="#software"><i class="fas fa-ellipsis-h"></i> Option 2</a>
        <a href="#coding"><i class="fas fa-ellipsis-h"></i> Option 3</a>
        <a href="#games"><i class="fas fa-ellipsis-h"></i> Option 4</a>
        <a href="#other"><i class="fas fa-ellipsis-h"></i> Option 5</a>
      </div>
    </div>

As you can see, the arrow icon facing down (fas fa-caret-down) and arrow icon facing up (fas fa-caret-up), are for some reason in another row, than the text. Is there any way of fixing this?

And to clarify further, the icons within the .dropdown-content are working properly, just the ones inside the dropbtn aren’t! So that’s what I need assistance with!