Unerwartete Verzerrung der Schriftart Awesome Symbole in CSS erstellt Hexagon

Question

Ich versuche, Social Media-Symbole mit dem Font-awesome i-Tag mit fa-Klasse zu einem Hexagon-Hintergrund hinzufügen. Die Social-Media-Icons sollten alle nebeneinander in Hexagon-Hintergründen sitzen und die Hintergrundfarbe beim Hover ändern. Allerdings sind die Probleme, die ich bin immer sind wie folgt:

UPDATE Die Geige fast richtig ist, wir müssen in der Lage, nur die Shpae aussehen wie ein Hexagon zu machen https://jsfiddle.net/onkkdef6/4/

Probleme:

1. die Social-Media-Symbole werden durch das Sechseck verzogen

2. Das Sechseck jetzt nicht die Hintergrundfarbe auf schweben

3. Die Social-Media-Symbole sollten mehr img-responsive

https://jsfiddle.net/onkkdef6/

werden ändern 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

Sie die untergeordneten Elemente verwandeln - und sollte nicht sein. zufällt Sie dazu die Symbole wieder - wie so (aber stellen Sie sicher, dass diese nach .hexagon ist: nach):

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

Arbeitsbeispiel: https://jsfiddle.net/onkkdef6/4/

Wenn Sie nicht in der Lage sind zu spielen, um die Skalen und CSS an Ihre Bedürfnisse anpassen, vielleicht können Sie eine Bibliothek wie diese verwenden. Sieht aus, genau zu sein, was Sie wollen.

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

Answer 2

änderte ich das Sechseck i auf 2,4 scaleX die gewünschte Sechseck Form zu erhalten die ich suchte.

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

Dies ist die volle Arbeits 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); 
} 

Dank Mike Barwick, der mich den größten Teil der Antwort herauszufinden geholfen. Dank seiner Hilfe konnte ich mein Problem lösen.

Dies ist die Arbeits Geige: https://jsfiddle.net/onkkdef6/5/