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

Question

[Pr0grammer]

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

Comments

[Андрей Федоров]

это svg внутри блока (кнопки или ссылки) со border-radius.

[Pr0grammer]

Андрей Федоров, У меня как то так получается, но все равно уродливо.
https://jsfiddle.net/4scpbwtj/

[Антон Литвиненко]

Pr0grammer, жеж fontawesome нужно подключить то

[Андрей Федоров]

Pr0grammer, иконочный шрифт не то, что я имел в виду. Вам нужен обычный инлайн svg, например с этого сайта - https://iconmonstr.com/

[Pr0grammer]

Антон Литвиненко, Я Подключил и как то так получилось.

[Pr0grammer]

Андрей Федоров, Мне надо белый а там нету..

[Антон Литвиненко]

Pr0grammer, круги делаете сами, такого цвета как надо. иконки в кругах тоже такого цвета как надо. где проблема-то?

<a href="#1" class="fb icon"><i class="fab fa-facebook-f"></i></a>
<a href="#1" class="tw icon"><i class="fab fa-twitter"></i></a>

.icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
}

.fb {
	background-color: #00BFD8;
}

.fb .fab {
	font-size: 24px;
	color: #fff;
}

.tw {
	background-color: #fff;
}

.tw .fab {
	font-size: 24px;
	color: #00BFD8;
}

Answer 1

[IIIu6ko]

SVG + CSS


SVG иконки можно найти здесь
https://www.flaticon.com

Comments

[Pr0grammer]

А можно это на чистый css?

[IIIu6ko]

Pr0grammer, https://jsonformatter.org/scss-to-css

[Pr0grammer]

IIIu6ko, Огромное СПАСИБО