使用Html在圆形位置添加菜单

您好，我正在尝试做类似的事情，但不是图标，我正在尝试放置图标

我当前的html代码是

<div>
 <center> 
  <a href="#"> 
  <button class="btn btn-success btn-lg">a</button></a>
  </center>
  <left><img src="img/arrow.png" alt="" width="250px" height="150px"/></left>
  <br>
  <br>
  <left>
  <a href="#"><button class="btn btn-warning btn-lg"><center>b</center></button></a>
  </left>
  <a href="#" style="float:right">  <button class="btn btn-danger btn-lg">1</button></a>
  <br>
  <br>
  <br>
  <br>
  <center><a href="#">  <button class="btn btn-success btn-lg">2</button></a><br><br></center>
  </div>

---

我怎样才能做到这一点呢？

给你。演示包括一个带有图标的版本和一个带有文本的版本。完整的代码请参见演示链接，因为下面的屏幕截图中没有看到菜单的动画。如果你想用这些，请随便用叉子叉

图标

正文

---

有关两个版本的完整CSS代码，请参见链接。。我没有在这里发帖，因为有点多。

非常感谢。。我需要类似的东西。。我用我的引导程序实现了它

<div class="wrap">
 <div class="circle">
   <i class="icon i1 icon-flag"></i>
   <i class="icon i2 icon-heart"></i>
   <i class="icon i3 icon-code"></i>
   <i class="icon i4 icon-coffee"></i>
   <div class="line1"></div>
   <div class="line2"></div>
   <span class="text">Menu</span>
 </div>
</div>

<div class="wrap2">
 <div class="circle">
   <i class="icon i1">A</i>
   <i class="icon i2">B</i>
   <i class="icon i3">C</i>
   <i class="icon i4">D</i>
   <div class="line1"></div>
   <div class="line2"></div>
   <span class="text">Menu</span>
 </div>
</div>