html로

Question

를 사용하여 원형 위치에 메뉴를 추가

내가 아이콘

을 배치하려고 대신 아이콘이 http://imgur.com/Ilu7ZM5 그런 짓을하려고 안녕하세요

내 현재의 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> 

입니다 달성 해?

Answer 1

여기 있습니다. 데모에는 아이콘이있는 버전과 텍스트가있는 버전이 포함됩니다. 아래의 스크린 샷에서 볼 수없는 메뉴에 대한 애니메이션이 있기 때문에 전체 코드의 데모 링크를 참조하십시오. 당신이이를 사용하려는 경우 .. 그것을 포크 주시기

아이콘

<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> 

모두의 전체 CSS 코드에 대한

참조 링크 버전 .. 꽤 많이 있기 때문에 여기에 게시하지 않았습니다.