Не могу сложить 2 fa fa иконки отдельно - PullRequest
Новая
       7

Не могу сложить 2 fa fa иконки отдельно

0 голосов
/ 04 мая 2020

Я использую иконки 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 тега ниже друг друга? Поскольку это не работает для меня, я использую

URL:

https://fontawesome.com/v4.7.0/icons/ шрифт awsome

Спасибо,

Обычные игры

1 Ответ

0 голосов
/ 04 мая 2020

Если я правильно понял ваше требование, это то, что вам нужно? 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...