Как сделать такие соц. иконки?

261
30 марта 2018, 10:49

Я пытаюсь сделать через шрифт. Не получается четко поставить иконку в центр рамки. Очень хочу узнать как бы вы это сделали.

Answer 1

Подобный эффект делается через вставку исходного кода SVG изображения в код документа или созданием SVG спрайта. После чего вы получите доступ к изменению цвета изображения через CSS: 

svg.icon{
    fill: #fff;
}
svg.icon:hover{
    fill: #0f0;
}
Answer 2

Пример. Использовано несколько строчек собственного css кода и font awesome.

.fa-circle-thin { 
  color: #51e265; 
} 
 
.fa-stack:hover .fa-circle-thin { 
  color: #51e265; 
} 
 
.fa-circle { 
  color: transparent; 
} 
 
.fa-stack:hover .fa-circle { 
  color: #51e265; 
} 
 
.fa-stack:hover .fa-inverse { 
  color: #fff !important; 
} 
 
.fa-inverse { 
  color: #51e265 !important; 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<span class="fa-stack fa-5x"> 
  <i class="fa fa-circle fa-stack-2x"></i> 
  <i class="fa fa-circle-thin fa-stack-2x"></i> 
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> 
</span> 
 
<span class="fa-stack fa-4x"> 
  <i class="fa fa-circle fa-stack-2x"></i> 
  <i class="fa fa-circle-thin fa-stack-2x"></i> 
  <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> 
</span>

Answer 3

Font Awesome нормально центрирует иконки сам.

Пример для v4.7.0

i{ 
color:#67BF95; 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <title>Пример страницы</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
</head> 
 
<body> 
  <span class="fa-stack fa-lg"> 
  <i class="fa fa-circle fa-stack-2x"></i> 
  <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> 
</span> 
 
  <span class="fa-stack fa-lg"> 
  <i class="fa fa-circle-thin fa-stack-2x"></i> 
  <i class="fa fa-facebook fa-stack-1x"></i> 
</span> 
 
</body> 
 
</html>

Answer 4

Как вариант, задать line-height такой же как и высота блока

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
 
.social { 
  width: 150px; 
  height: 150px; 
  margin: 0 auto; 
  margin-bottom: 50px; 
  margin-top: 50px; 
  background-color: #67bf95; 
  text-align: center; 
  border-radius: 50%; 
  line-height: 150px; 
  font-size: 60px; 
} 
 
.facebook { 
  border: 5px solid #67bf95; 
  background-color: transparent; 
} 
 
.fa-pencil{ 
  color: #fff; 
} 
 
.fa-facebook { 
  color: #67bf95; 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<div class="social pencil"> 
  <i class="fa fa-pencil"></i> 
</div> 
<div class="social facebook"> 
  <i class="fa fa-facebook"></i> 
</div>

READ ALSO
помогите сделать такой переключатель ?
CSS

помогите сделать такой переключатель ?

подскажите как сверстать такой переключатель ?

 271
Почему не срабатывает min-width?
CSS

Почему не срабатывает min-width?

Сайт - для нормального отображения на планшетах через media установил min-width: 1200px (по максимальной ширине контента)В итоге сайт будто приближен...

 257
Почему не работает цикл for
CSS

Почему не работает цикл for

На странице есть группа radioButton кнопок, которые разделены между собой при помощи атрибута nameНеобходимо получить все эти кнопки и в цикле реагировать...

 321
Отключить строгий режим
MySQL

Отключить строгий режим

не могу отключить строгий режим, т к не могу найти mycnf, его просто нет

 259