字体真棒图标放置在CSS创建六角形意外扭曲

Question

我试图添加社会媒体图标字体真棒我与fa类标记为Hexagon背景。社交媒体图标应该全部坐在六边形背景内相邻，并在悬停时更改背景颜色。然而，我发现了问题如下：

UPDATE小提琴几乎是正确的，我们只是需要能够使shpae看起来像一个六角https://jsfiddle.net/onkkdef6/4/

问题：

1.社交媒体图标被扭曲的六角形

2.六边形现在不会悬停改变背景颜色

社交媒体图标应更多IMG响应

https://jsfiddle.net/onkkdef6/

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 


      <div class="row"> 


       <div class="social"> 
        <ul> 
        <li><a class="hexagon" href="#"><i class="fa fa-lg fa-linkedin"></i> </a> </li> 
        <li><a class="hexagon" href="#"><i class="fa fa-lg fa-twitter"></i> </a> </li> 
         <li><a class="hexagon" href="#"><i class="fa fa-lg fa-facebook"></i> </a> </li> 
        <li><a class="hexagon" href="#"><i class="fa fa-lg fa-yelp"></i></a></li> 
        <li><a class="hexagon" href="#"><i class="fa fa-lg fa-instagram"></i></a></li> 
        </ul> 
       </div> 


         <div class="social"> 
        <ul> 
        <li><a class="" href="#"><i class="fa fa-lg fa-linkedin"></i> </a> </li> 
        <li><a class="" href="#"><i class="fa fa-lg fa-twitter"></i> </a> </li> 
         <li><a class="" href="#"><i class="fa fa-lg fa-facebook"></i> </a> </li> 
        <li><a class="" href="#"><i class="fa fa-lg fa-yelp"></i></a></li> 
        <li><a class="" href="#"><i class="fa fa-lg fa-instagram"></i></a></li> 
        </ul> 
       </div> 


       </div> 

CSS：

* { box-sizing: border-box; margin: 0; padding: 0; } 



    .hexagon { 
     position: relative; 
     display: inline-block; 
     overflow: hidden; 
     margin: 0 8.5%; 
     padding: 16%; 
     transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */ 
    } 
    .hexagon:before{ 
     display: block; 
     position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */ 
     top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */ 
     transform: scaleX(1.155) skewY(-30deg) rotate(-30deg); /* 1.155 = 2/sqrt(3) */ 
     background-color: rgba(30,144,255,.56); 
     background-size: cover; 
     content: ''; 
    } 


     .social { 
     margin: 0; 
     padding: 0; 
    } 

    .social ul { 
     margin: 0; 
     padding: 5px; 
    } 

    .social ul li { 
     margin: 5px; 
     list-style: none outside none; 
     display: inline-block; 
    } 


     .social i { 
     width:80px; 
     height: 80px; 
     color: #FFF; 
     background-color: #333; 
     font-size: 42px; 
     text-align:center; 
     padding-top: 25px; 

     transition: all ease 0.3s; 
     -moz-transition: all ease 0.3s; 
     -webkit-transition: all ease 0.3s; 
     -o-transition: all ease 0.3s; 
     -ms-transition: all ease 0.3s; 
    } 

    .social i:hover { 

     text-decoration: none; 
     transition: all ease 0.3s; 
     -moz-transition: all ease 0.3s; 
     -webkit-transition: all ease 0.3s; 
     -o-transition: all ease 0.3s; 
     -ms-transition: all ease 0.3s; 
    } 

     .social .fa-facebook:hover { /* round facebook icon*/ 
     background: #4060A5; 
    } 

    .social .fa-twitter:hover { /* round twitter icon*/ 
     background: #00ABE3; 
    } 

    .social .fa-yelp:hover { /* round google plus icon*/ 
     background: #e64522; 
    } 


    .social .fa-linkedin:hover { /* round linkedin icon*/ 
     background: #0094BC; 
    } 


    .social .fa-instagram:hover { /* round instagram icon*/ 
     background: #375989; 
    } 

Answer 1

你转化子元素 - 而且不应该。刚刚恢复的图标后面 - 像这样（但要确保这是后.hexagon：后）：

.hexagon i { 
    transform: rotate(-45deg) skewY(0) scaleX(1.866); 
} 

工作例如： https://jsfiddle.net/onkkdef6/4/

如果您不能玩弄比例尺和CSS来满足您的需求，也许您可​​以使用这样的库。看起来正是你想要的。

http://ninodezign.com/css3-hexagon-buttons/

Answer 2

我改变了我的scaleX 2.4六边形以获得所需的六边形我一直在寻找。

.hexagon i { 
    transform: rotate(-45deg) skewY(0) scaleX(2.4); 
} 

这是一个完整的工作CSS：

* { box-sizing: border-box; margin: 0; padding: 0; } 



.hexagon { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    margin: 0 8.5%; 
    padding: 16%; 
    transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */ 
} 
.hexagon:before{ 
    display: block; 
    position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */ 
    top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */ 
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg); /* 1.155 = 2/sqrt(3) */ 
    /* background-color: rgba(30,144,255,.56); */ 
    background-size: cover; 
    content: ''; 
} 


    .social { 
    margin: 0; 
    padding: 0; 
} 

.social ul { 
    margin: 0; 
    padding: 5px; 
} 

.social ul li { 
    margin: 5px; 
    list-style: none outside none; 
    display: inline-block; 
} 


    .social i { 
    width:80px; 
    height: 80px; 
    color: #FFF; 
    background-color: #333; 
    font-size: 42px; 
    text-align:center; 
    padding-top: 25px; 

    transition: all ease 0.3s; 
    -moz-transition: all ease 0.3s; 
    -webkit-transition: all ease 0.3s; 
    -o-transition: all ease 0.3s; 
    -ms-transition: all ease 0.3s; 
} 

.social i:hover { 

    text-decoration: none; 
    transition: all ease 0.3s; 
    -moz-transition: all ease 0.3s; 
    -webkit-transition: all ease 0.3s; 
    -o-transition: all ease 0.3s; 
    -ms-transition: all ease 0.3s; 
} 

    .social .fa-facebook:hover { /* round facebook icon*/ 
    background: #4060A5; 
} 

.social .fa-twitter:hover { /* round twitter icon*/ 
    background: #00ABE3; 
} 

.social .fa-yelp:hover { /* round google plus icon*/ 
    background: #e64522; 
} 


.social .fa-linkedin:hover { /* round linkedin icon*/ 
    background: #0094BC; 
} 


.social .fa-instagram:hover { /* round instagram icon*/ 
    background: #375989; 
} 

.hexagon i { 
    transform: rotate(-45deg) skewY(0) scaleX(2.4); 
} 

感谢Mike巴威克谁帮我算出来的答案。感谢他的帮助，我解决了我的问题。

这是工作提琴： https://jsfiddle.net/onkkdef6/5/