无法将 2 个 fa fa 图标堆叠在一起



我在中使用fa图标

<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<title> Ring Games </title>
</head>
<body>
<div class="div">
<ul> 
<li> <i class="fa fa-facebook-official" > Find us on facebook </i></li>
<li> <i class="fa fa-users"> Users </i></l1>
<script src="https://use.fontawesome.com/73dc7d73e2.js"></script>
</ul>
</div>
<style>
.div ul  {
position: absolute;
margin: 0;
padding: 0;
bottom: 10px;
display: flex;
justify-content: center;
width: 100%;
list-style: none;
text-decoration: none;
}

}
.div ul li:nth-child(1) {
transition-delay: 0.5s;
text-decoration: none;
}
.div ul li:nth-child(2) {
transition-delay: 0.5s;
line-spaceing: 10px;
}
.div ul li {
color: blue;
font-size: 1.5em;
padding-bottom: 10px;
cursor: pointer;
transition: 0.5s;
opacity: 1;
transform: translateY(20px);
line-height: 1000px;
}
</style>
</body>

它显示了,但后来他们互相触摸。有可能让两个标签互相吼叫吗?因为它对我不起作用我正在使用

Url:

https://fontawesome.com/v4.7.0/icons/font awsome

谢谢你,

Ring Games

如果我正确理解了您的需求,这就是您需要的吗?

.div {
display: flex;
flex-direction: column;
}
.div ul li:nth-child(1) {
transition-delay: 0.5s;
text-decoration: none;
}
.div ul li:nth-child(2) {
transition-delay: 0.5s;
}
.div ul li {
color: blue;
font-size: 1.5em;
padding-bottom: 10px;
cursor: pointer;
transition: 0.5s;
opacity: 1;
transform: translateY(20px);
}
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<div class="div">
<ul>
<li> <i class="fa fa-facebook-official"> Find us on facebook </i></li>
<li> <i class="fa fa-users"> Users</i></li>
</ul>
</div>

最新更新