html - 在不使用导航或图标栏的情况下使用 div 类中的图标

Question

我想在 Bootstrap 的 div 栏中添加最多 6 个图标，如下图所示，我已经在图标栏类中完成了，但我的主管禁止我这样做，所以我不能使用任何导航栏或图标栏。最好的方法是什么？还有如何让它与下面的 div 分开？

The wireframe of what I want

以下是我的html代码:

<nav class="navbar ">
<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"> </i> </a> 
  <a href="#"><i class="fa fa-search"> </i> </a> 
 <a href="#"><i class="fa fa-globe"> </i> </a> 
 <a href="#"><i class="fa fa-envelope"> </i> </a> 
 <a href="#"><i class="fa fa-trash"> </i> </a> 
</div>
</nav>

<div class="container-fluid">
 <div class="col-sm-12" style="background-color: green;"></div> <br> <br>

Answer 1

简单的复制粘贴

<style>
 .icons_div {
      margin: 0px auto;
      width: max-content;
  }
  .icon{
    margin : 0px auto;
    width: 15px;
    display: initial;
  }
  .fa {
    padding: 0px 10px;
  }
</style>

<div class="icons_div">
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
    <div class="icon">
            <i class="fa fa-circle" aria-hidden="true"></i>
        </div>
</div>