意外的失真Font Awesome图标放置在CSS内创建Hexagon [英] Unexpected distortion of Font Awesome Icons placed inside CSS created Hexagon
本文介绍了意外的失真Font Awesome图标放置在CSS内创建Hexagon的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Font-awesome i标记和fa类将社交媒体图标添加到六边形背景。社交媒体图标应该都在六边形背景内彼此相邻，并在悬停时更改背景颜色。然而，我得到的问题如下：
UPDATE 小提琴几乎是正确的，我们只需要能够使shpae看起来像六角形
/ strong>
1。社交媒体图标被六角形扭曲
2。。六边形现在不会更改悬停时的背景颜色
3。更多img响应
https://jsfiddle.net/onkkdef6/
HTML
< link href =https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css =stylesheet >
< div class =row>
< div class =social>
< ul>
< li>< a class =hexagonhref =＃>< i class =fa fa-lg fa-linkedin>< / i> < / a> < / li>
< li>< a class =hexagonhref =＃>< i class =fa fa-lg fa-twitter>< / i> < / a> < / li>
< li>< a class =hexagonhref =＃>< i class =fa fa-lg fa-facebook>< / i> < / a> < / li>
< li>< a class =hexagonhref =＃>< i class =fa fa-lg fa-yelp>< / i>< / a> ; / li>
< li>< a class =hexagonhref =＃>< 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;底部：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;
}
解决方案
到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;底部：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 Barwick帮助我找出大部分答案。感谢他的帮助，我能够解决我的问题。
这是工作的小提琴：
https ：//jsfiddle.net/onkkdef6/5/
I'm attempting to add social media icons using the Font-awesome i tag with fa class to a Hexagon background. The social media icons should all sit next to each other inside hexagon backgrounds and change background color on hover. However the problems I'm getting are as following:
UPDATE The fiddle is almost right, we just need to be able to make the shpae look like a Hexagon https://jsfiddle.net/onkkdef6/4/
Problems:
1. The social media icons are warped by the hexagon
2. The hexagon now won't change background color on hover
3. The social media icons should be more img-responsive
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;
}
解决方案
I changed the hexagon i scaleX to 2.4 to get the desired hexagon shape I was looking for.
.hexagon i {
transform: rotate(-45deg) skewY(0) scaleX(2.4);
}
This is the full working 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);
}
Thanks to Mike Barwick who helped me figure out most of the answer. Thanks to his help I was able to solve my problem.
This is the working fiddle: https://jsfiddle.net/onkkdef6/5/
这篇关于意外的失真Font Awesome图标放置在CSS内创建Hexagon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
