Круглая рамка возле квадратной иконки

162

01 декабря 2018, 19:40

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

body { 
  background: green; 
} 
 
.fa-circle { 
  color: red; 
  border: 2px solid #fff; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<div class="ind"> 
  <i class="fa  fa-circle  hr"></i> 
</div>

Answer 1

Вот так можно сделать. Сначала задаём рамку для нашег округа тегом border, устанавливаем размер в 2px, задаём сплошуную линияю ( solid ), цвет white. Ставим border-radius:100%;. Закрашиваем весь background-color: red; в красный. И вуаля!

body { 
  background: green; 
} 
 
.fa-circle { 
  width: 20px; 
  height: 20px; 
  color: red; 
  background-color: red; 
  border: 2px solid black; 
  border-radius: 100%; 
} 
 
.fa-circle::before { 
  display: none; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
<div class="ind"> 
  <div class="fa-circle"></div> 
</div>