Блог

Редактировать: С тех пор я обнаружил ошибку, я неправильно связал свой CSS с моим HTML, я оставлю этот вопрос здесь в надежде, что кто-то, у кого был законный вопрос об иконах, найдет, что это помогает им.

Проблема: у меня есть два значка, один из которых связывает мой GitHub, а другой-мой LinkedIn. Я пытаюсь переместить эти значки в нижнюю часть моей страницы (которая пока пуста) в эстетических целях. К сожалению, это не работает.

Что я пробовал:

• установите положение в относительное/абсолютное
• используемое верхнее слияние
• ширина
• поле 0;
• использованный поплавок
• используемая высота линии
• используется вертикальное выравнивание
• используемая высота

Я считаю, что проблема в следующем: я думаю, что я не использую правильный код для изменения положения этого элемента.

 .fa:hover {
  opacity: 0.2;
}

.fa-github {
  background: #3B5998;
  color: white;
}

.fa-linkedin {
  background: #55ACEE;
  color: white;
} 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1>Test H1</h1>
<p>Test p</p>


<a href="" class="fa fa-github"></a>
<a href="" class="fa fa-linkedin"></a> 

Изображение значков на странице:

Я не знаю, каков ваш план, но быстрое и грязное решение состоит в том, чтобы обернуть ваши значки в a .footer и использовать этот код:

 .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}
 

 <div class="footer">
    <a href="" class="fa fa-github"></a>
    <a href="" class="fa fa-linkedin"></a>    
</div>