Question

因此，这是我的菜单，问题是fa-icon正在改变其大小。请帮帮我！

您的帖子似乎主要是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<title>Back-to-all</title>
	<style type="text/css">
		body {
            background-image: url("http://www.thomsonfinancialpartners.ca/wp-content/uploads/2017/01/gradient-bg.jpg");
            background-size: 100% 100%;
            background-size: cover;
            z-index: -1;
        }
        .menu {
        	z-index: 0;
        	position: absolute;
        	top: 8%;
        	left: 22%;
        	right: 22%;
        	width: 56%;
        	height: 10%;
        	border-radius: 25px;
        	background-color: #2c3e50;
        	display: flex;
        	flex-direction: row
        }
        .main{
        	z-index: 1;
            margin: 6px 48px;      	
        }
        .galery{
        	z-index: 1;
            margin: 6px 48px;
        }
        .music{
        	z-index: 1;
            margin: 6px 48px;
        }
        .about{
        	z-index: 1;
            margin: 6px 48px;
        }
       .log{
         	z-index: 1;
            margin: 6px 48px;
        }
        .circle{
        	z-index: -1;
        	position: absolute;
        	top: 6%;
        	left: 43.2%;
        	opacity: 0;
        	background-color: #2c3e50;
        	width: 13%;
        	height: 14%;
        	border-radius: 50%;

        }
        
        a {
        color: #000000;
        }
        
        a:link {
        color: #000000;
        }
        a:visited {
        color: #000000;
        }
        a:hover {
        color: #000000;
        }
	</style>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){

			$(".fa-picture-o").on('mouseover', function(){
				$(".circle").animate({opacity: '1'});
				$(".circle").animate({'left': '21.5%'},'fast');
            });

            $(".fa-music").on('mouseover', function(){
				$(".circle").animate({opacity: '1'});
				$(".circle").animate({'left': '32.6%'},'fast');
            });
               
            $(".fa-home").on('mouseover', function(){
				$(".circle").animate({opacity: '1'});
				$(".circle").animate({'left': '43.2%'},'fast');
            });
             
            $(".fa-address-card-o").on('mouseover', function(){
				$(".circle").animate({opacity: '1'});
				$(".circle").animate({'left': '54.3%'},'fast');
            });
            
            $(".fa-sign-out").on('mouseover', function(){
				$(".circle").animate({opacity: '1'});
				$(".circle").animate({'left': '65.6%'},'fast');
            });
           

		});
	</script>
	<div class="menu">
	    <a href="galery.html"><div class="galery"><i class="fa fa-picture-o  fa-3x" aria-hidden="true"></i></div></a>
        <a href="music.html"><div class="music"><i class="fa fa-music  fa-3x" aria-hidden="true"></i></div></a>
        <a href="back-to-all.html"><div class="main"><i class="fa fa-home  fa-3x" aria-hidden="true"></i></div></a>
        <a href="about.html"><div class="about"><i class="fa fa-address-card-o  fa-3x" aria-hidden="true"></i></div></a>
        <a href="#"><div class="log"><i class="fa fa-sign-out  fa-3x" aria-hidden="true"></i></div></a>
	</div>
	<div class="circle"></div>
</body>
</html>

我需要fa-icon在缩放页面时不要更改其大小

0 个答案: