Сделаем подборку разных иконок facebook, шрифт awesome и иконка "fa fa-facebook" + иконки facebook в форматах svg, png. Будем регулировать цвет, размер иконки facebook.
Если вы не знаете, что такое awesome, то настоятельно рекомендую! Svg - периодически использую, когда в "awesome" нет иконки. А "Png" - давно не использую, очень неудобно, по сравнению с двумя выше перечисленными!
Для того, чтобы данная иконка заработала у вас на сайте требуется : подключить FONT AWESOME.
И поместить код иконки на сайт в том месте, в котором требуется:
<i class="fa fa-facebook" aria-hidden="true"></i>
Результат вывода иконки "fa fa-facebook" по умолчанию:
К данной иконки, сейчас ничего не подключено, кроме стилей по умолчанию, которые находятся в установленном файле css, у нас он здесь
Как видим, что наша "иконка facebook" очень-очень скучная.
Но мы можем её модифицировать! Например так:
Или смотри справа, такой же вариант в сайдбаре, только круглый!
Показать
html:
<i class="fa fa-facebook example"></i>
css:
i.fa.fa-facebook.example {
font-size: 20px;
color: rgba(72, 122, 189);
border: 1px solid rgb(72, 122, 189);
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
transition: 1s;
}
i.fa.fa-facebook.example:hover {
color: white;
background: #00559f;
cursor: pointer;
transition: 1s;
}
Сразу несколько кнопок соцсетей и в том числе и facebook
Следующим пунктом разберем иконку facebook в формате svg код :
Иконка facebook svg
Вообще иконок facebook svg - огромное количество! Я не смогу составить конкуренцию специализированным сайтам по иконкам, но некоторые возможности стилизации данных иконок, надеюсь, вам будут полезны.
Но вообще, сейчас, сегодня, я не стал бы заморачиваться с форматом png, либо с любым подобным форматом картинки - просто потому, что это одна большая проблема.
Другие типы и виды иконок прекрасно и просто стилизуются и мороки там в 10 раз меньше!
Но тем не менее. что мы можем сделать, если у нас вот такая иконка facebook в формате png.