无法将2个fa fa图标分开堆叠

问题描述 投票:0回答:1

我正在使用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>

它显示,但随后彼此接触是否可以使2个标签互相波纹?因为它对我不起作用我正在使用

网址:

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

谢谢,

铃声游戏

html css
1个回答
0
投票

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

.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>
© www.soinside.com 2019 - 2024. All rights reserved.