引导5浮动动作按钮

Question

我有以下代码来表示浮动操作按钮：

.dropup .hide-toggle.dropdown-toggle::after {
    display: none !important;
}

<div class="dropup position-absolute bottom-0 end-0 rounded-circle m-5">
    <button type="button" class="btn btn-success btn-lg dropdown-toggle hide-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
        <i class="fa-solid fa-plus"></i>
        <span class="visually-hidden">Add Category</span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="#">...</a>
        </li>
    </ul>
</div>

但我有一个问题，隐藏在.dropdown-toggle中的切换图标，尽管有一个CSS规则，让它不显示。

我能做些什么来移除图标？

Answer 1

你确定不管用吗？我在这里没有看到图标。

​

.dropup .hide-toggle.dropdown-toggle::after {
  display: none !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="dropup position-absolute bottom-0 end-0 rounded-circle m-5">
  <button type="button" class="btn btn-success btn-lg dropdown-toggle hide-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
    <i class="fa-solid fa-plus"></i>
    <span class="visually-hidden">Add Category</span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item" href="#">...</a>
    </li>
  </ul>
</div>

​