我正在设计一个 html 页面，我想将向上箭头和向下箭头替换为星号和我（信息）。请在 css 中给我建议
I am designing a html page and i wanted to replace up-arrow and down-arrow to star and i (info).please suggest me in css
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" href="font/roboto/font.css" />
<link rel="stylesheet" href="preloader/preloader.css" />
<link rel="stylesheet" href="font/icons/ionicon/css/ionicons.min.css" />
<link rel="stylesheet" href="css/base/materialize.min.css" />
<link rel="stylesheet" href="css/green.css" />
<link rel="stylesheet" href="css/animate/magic.min.css"/>
<link rel="stylesheet" href="css/base/test.css" />
<link rel="stylesheet" href="css/base/post.css" />
<link rel="stylesheet" href="css/base/jquery.scrollbar.css" />
</head>
<body>
<!--?php include '../header.php'?-->
<div id="bg-overlay"> </div>
<div class="container-fluid" id="main" style="display: block;">
<!--?php echo $fout ?-->
<div class="row" id="content">
<div class="col s12">
</div>
<div class="post col l4 m6 s12">
<div class="col s6 offset-s3 post-image center no-padding" style="width: 202px; height: 202px; background: url("images/post/1.jpg") 0% 0% / 100% 100%;">
<div class="postdate" style="height: 202px; padding-top: 71px;"><span>23/6</span><br>12:00 am</div>
</div>
<div class="col s12 post-below no-padding waves-effect z-depth-3" style="margin-top: -71px;">
<label class="col s6 left no-padding">
<div id="up-vote"><i class="ion-arrow-up-c"></i> <label class="up-vote"></label></div>
</label>
<label class="col s6 right no-padding">
<div id="down-vote"><label class="down-vote"></label> <i class="ion-arrow-down-c"></i></div>
</label>
<div class="col s12 post-head center truncate" style="padding-top: 57.3333px;">
Game Title
</div>
<hr class="post-head-bottom">
<div class="col s12 desp">
<div class="post-detail "></div>
</div>
<div class="row" id="bottom-row">
<div class="col s7 left auth no-padding">
</div>
<div class="col s5 right right-align comment-contain">
<a href="#">Know more</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- /container -->
<script src="js/post.js"></script>
<script>
$(document).ready(function(){
$.backstretch("images/back.png");
if(newuser==1){
$("#content").css('display','none');
}
})
</script>
<div class="hiddendiv common"></div><div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 667px; width: 808px; z-index: -999999; position: fixed;"><img src="images/back.png" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 998.005px; height: 667px; max-height: none; max-width: none; z-index: -999999; left: -95.0025px; top: 0px;"></div></body>
所以当我点击星标时，它应该显示图像左侧所示的评级，当我点击信息（i 符号）时，它应该显示游戏信息，如图所示图片的右边。
/*css/base/post.css*/
@keyframes fillup {
from {width:0%}
to {width:75%}
}
@media(max-width:992px){
.comment-contain,.auth{padding-top:50px !important}
.auth-name{font-size:16px !important}
}
@media(min-width:993px){
.comment-contain,.auth{padding-top:50px !important}
}
#content{color:#90a4ae;position: absolute;top:130px;right: 0;left: 0;}
.post{margin-bottom:20px}
/* post image*/
.post>div.post-image{background:#4fc3f7;border-radius:50%;z-index:2;position:relative;width:100%;background-position:center !important;
-webkit-box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
-moz-box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
transition:1s all ease;-webkit-transition:1s all ease;-moz-transition:1s all ease;-ms-transition:1s all ease;
}
.post>div.post-image:hover{background-size:150% 150% !important;cursor: pointer;}
.postdate{font-size:20px;color:#fff;font-weight:700;background:rgba(21,21,21,0.5);border-radius:50%;opacity:0;text-align:center;
transition:0.3s all ease;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;}
.postdate>span{font-size:30px;font-weight:300}
.post>div.post-image:hover .postdate{opacity:1}
/* votes*/
.vote{font-size:20px;color: #e0e0e0;}
#up-vote,#down-vote{font-size:20px;color:#e0e0e0;line-height:35px;font-weight:300;margin-top:10px;
transition:0.3s all ease-in;-webkit-transition:0.3s all ease-in;-moz-transition:0.3s all ease-in;-ms-transition:0.3s all ease-in;}
#up-vote{margin-left:20px}
#down-vote{text-align:right;margin-right:20px}
.up-vote,.down-vote{font-size:20px;color:#e0e0e0}
/* below*/
.post-below{border:2px solid #e0e0e0;color:#e0e0e0;border-radius:5px;z-index:1;position:relative;}
/*post date & time*/
.post-head{font-size:25px;font-weight:500;}
.post-head-bottom{float:left;animation:fillup 2s;-webkit-animation: fillup 2s;-moz-animation: fillup 2s;width:75%;height:2px;background:#fff}
.post-detail{height:50px;}
.comment-contain,.auth{padding-top:20px}
.comment{border:2px solid #ffd54f ;padding:10px;font-weight:500;color:#e0e0e0;background:rgba(255,213,79,0.5);}
.auth-img{width:40px;height:40px;border-radius:50%}
.auth-name{color:#e0e0e0;font-size:18px;font-weight:300;line-height:40px}
I want to change the code in div id="up-vote" and div id="down-vote" in css to star and alphabet i which mean info.
I am unable to insert the star and letter i in the places of up-arrow and down-arrow.
[1]: http://i.stack.imgur.com/nN64m.jpg
据我了解，您只是想将图标从箭头更改为星星。看起来你不需要更改#up-vote 或#down-vote，但你需要更改其中的图标及其属性。
将 <i class="ion-arrow-up-c"></i> 和 <i class="ion-arrow-down-c"></i> 更改为：<i class="ion-star"></i>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" href="font/roboto/font.css" />
<link rel="stylesheet" href="preloader/preloader.css" />
<link rel="stylesheet" href="font/icons/ionicon/css/ionicons.min.css" />
<link rel="stylesheet" href="css/base/materialize.min.css" />
<link rel="stylesheet" href="css/green.css" />
<link rel="stylesheet" href="css/animate/magic.min.css"/>
<link rel="stylesheet" href="css/base/test.css" />
<link rel="stylesheet" href="css/base/post.css" />
<link rel="stylesheet" href="css/base/jquery.scrollbar.css" />
</head>
<body>
<!--?php include '../header.php'?-->
<div id="bg-overlay"> </div>
<div class="container-fluid" id="main" style="display: block;">
<!--?php echo $fout ?-->
<div class="row" id="content">
<div class="col s12">
</div>
<div class="post col l4 m6 s12">
<div class="col s6 offset-s3 post-image center no-padding" style="width: 202px; height: 202px; background: url("images/post/1.jpg") 0% 0% / 100% 100%;">
<div class="postdate" style="height: 202px; padding-top: 71px;"><span>23/6</span><br>12:00 am</div>
</div>
<div class="col s12 post-below no-padding waves-effect z-depth-3" style="margin-top: -71px;">
<label class="col s6 left no-padding">
<div id="up-vote"><i class="ion-arrow-up-c"></i> <label class="up-vote"></label></div>
</label>
<label class="col s6 right no-padding">
<div id="down-vote"><label class="down-vote"></label> <i class="ion-arrow-down-c"></i></div>
</label>
<div class="col s12 post-head center truncate" style="padding-top: 57.3333px;">
Game Title
</div>
<hr class="post-head-bottom">
<div class="col s12 desp">
<div class="post-detail "></div>
</div>
<div class="row" id="bottom-row">
<div class="col s7 left auth no-padding">
</div>
<div class="col s5 right right-align comment-contain">
<a href="#">Know more</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- /container -->
<script src="js/post.js"></script>
<script>
$(document).ready(function(){
$.backstretch("images/back.png");
if(newuser==1){
$("#content").css('display','none');
}
})
</script>
<div class="hiddendiv common"></div><div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 667px; width: 808px; z-index: -999999; position: fixed;"><img src="images/back.png" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 998.005px; height: 667px; max-height: none; max-width: none; z-index: -999999; left: -95.0025px; top: 0px;"></div></body>
所以当我点击星标时，它应该显示图像左侧所示的评级，当我点击信息（i 符号）时，它应该显示游戏信息，如图所示图片的右边。
/*css/base/post.css*/
@keyframes fillup {
from {width:0%}
to {width:75%}
}
@media(max-width:992px){
.comment-contain,.auth{padding-top:50px !important}
.auth-name{font-size:16px !important}
}
@media(min-width:993px){
.comment-contain,.auth{padding-top:50px !important}
}
#content{color:#90a4ae;position: absolute;top:130px;right: 0;left: 0;}
.post{margin-bottom:20px}
/* post image*/
.post>div.post-image{background:#4fc3f7;border-radius:50%;z-index:2;position:relative;width:100%;background-position:center !important;
-webkit-box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
-moz-box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
transition:1s all ease;-webkit-transition:1s all ease;-moz-transition:1s all ease;-ms-transition:1s all ease;
}
.post>div.post-image:hover{background-size:150% 150% !important;cursor: pointer;}
.postdate{font-size:20px;color:#fff;font-weight:700;background:rgba(21,21,21,0.5);border-radius:50%;opacity:0;text-align:center;
transition:0.3s all ease;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;}
.postdate>span{font-size:30px;font-weight:300}
.post>div.post-image:hover .postdate{opacity:1}
/* votes*/
.vote{font-size:20px;color: #e0e0e0;}
#up-vote,#down-vote{font-size:20px;color:#e0e0e0;line-height:35px;font-weight:300;margin-top:10px;
transition:0.3s all ease-in;-webkit-transition:0.3s all ease-in;-moz-transition:0.3s all ease-in;-ms-transition:0.3s all ease-in;}
#up-vote{margin-left:20px}
#down-vote{text-align:right;margin-right:20px}
.up-vote,.down-vote{font-size:20px;color:#e0e0e0}
/* below*/
.post-below{border:2px solid #e0e0e0;color:#e0e0e0;border-radius:5px;z-index:1;position:relative;}
/*post date & time*/
.post-head{font-size:25px;font-weight:500;}
.post-head-bottom{float:left;animation:fillup 2s;-webkit-animation: fillup 2s;-moz-animation: fillup 2s;width:75%;height:2px;background:#fff}
.post-detail{height:50px;}
.comment-contain,.auth{padding-top:20px}
.comment{border:2px solid #ffd54f ;padding:10px;font-weight:500;color:#e0e0e0;background:rgba(255,213,79,0.5);}
.auth-img{width:40px;height:40px;border-radius:50%}
.auth-name{color:#e0e0e0;font-size:18px;font-weight:300;line-height:40px}
I want to change the code in div id="up-vote" and div id="down-vote" in css to star and alphabet i which mean info.
I am unable to insert the star and letter i in the places of up-arrow and down-arrow.
[1]: http://i.stack.imgur.com/nN64m.jpg
据我了解，您只是想将图标从箭头更改为星星。看起来你不需要更改#up-vote 或#down-vote，但你需要更改其中的图标及其属性。
将 <i class="ion-arrow-up-c"></i> 和 <i class="ion-arrow-down-c"></i> 更改为：<i class="ion-star"></i>