使用 div class 中的图标而不使用导航或图标栏

Question

我想在 Bootstrap 中的 div 栏中添加最多 6 个图标，如下图所示，我已经在图标栏中添加了 class 但是我的主管已禁止我这样做，所以我不能使用任何导航栏或图标栏。最好的方法是什么？还有如何将它与下面的 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>

使用 div class 中的图标而不使用导航或图标栏

Using Icons in div class without using navigation or icon bar

html

css

frontend

web-frontend

bootstrap-4