Несколько видов иконок Facebook

20.04.2021 Марат 688 icon | font_awesome | facebook |

Сделаем подборку разных иконок facebook, шрифт awesome и иконка "fa fa-facebook" + иконки facebook в форматах svg, png. Будем регулировать цвет, размер иконки facebook.

Если вы не знаете, что такое awesome, то настоятельно рекомендую! Svg - периодически использую, когда в "awesome" нет иконки. А "Png" - давно не использую, очень неудобно, по сравнению с двумя выше перечисленными!

Иконка facebook в нескольких форматах:

Использование "fa fa-facebook", цвет, размер, стилизация
Facebook svg
Иконка facebook png
Скачать

Использование "fa fa-facebook", цвет, размер, стилизация<

Начнем с темы економічного шрифта "FONT_AWESOME" и использованием иконки "fa fa-facebook"

FONT_FONT_AWESOME

Для того, чтобы данная иконка заработала у вас на сайте требуется : подключить FONT AWESOME.

И поместить код иконки на сайт в том месте, в котором требуется:

Результат вывода иконки "fa fa-facebook" по умолчанию:

здесь

Как видим, что наша "иконка facebook" очень-очень скучная.

Но мы можем её модифицировать! Например так:

Или смотри справа, такой же вариант в сайдбаре, только круглый!

Html:

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 :

Html:

</div>

Css:

.container {

height: 40px;

width: 330px;

}

.container a {

border: unset !important;

text-decoration: none;

}

div.submenu span a i.fa {

padding: 10px;

color: #ccc;

height: 20px;

width: 30px;

border-radius: 50px;

margin: 10px;

position: relative;

z-index: 2;

}

div.submenu {

background-color: #212121;

border-radius: 5px;

padding: 4px 10px;

margin: 0;

overflow: hidden;

}

div.submenu span {

text-align: center;

}

div.submenu span a i.fa::after {

content: "";

height: 0%;

width: 0%;

position: absolute;

top: -500%;

bottom: -500%;

left: -500%;

right: -500%;

margin: auto;

border: 0px sospand transparent;

border-radius: 200px;

opacity: 0;

z-index: -1;

transition: all ease 0.5s;

}

div.submenu span a:hover i.fa::before {

color: #fff;

}

div.submenu span a:hover i.fa-facebook::after {

height: 200%;

width: 200%;

background-color: #3b5998;

border-radius: 0px;

opacity: 1;

}

div.submenu span a:hover i.fa-twitter::after {

height: 200%;

width: 200%;

background-color: #1dcaff;

border-radius: 0px;

opacity: 1;

}

div.submenu span a:hover i.fa-vk::after {

height: 200%;

width: 200%;

background-color: #d34836;

border-radius: 0px;

opacity: 1;

}

div.submenu span a:hover i.fa-instagram::after {

height: 200%;

width: 200%;

background-color: #8a3ab9;

border-radius: 0px;

opacity: 1;

}

Facebook svg

Следующим пунктом разберем иконку facebook в формате svg код :

Иконка facebook svg

Вообще иконок facebook svg - огромное количество! Я не смогу составить конкуренцию специализированным сайтам по иконкам, но некоторые возможности стилизации данных иконок, надеюсь, вам будут полезны.

Иконка логотип facebook на черном фоне

Простой код facebook svg:

Очень простая стилизация facebook svg

Изначально добавим цвет, почему цвет facebook svg - должен быть синим!7 Хочу красным!

И добавим эффект hover

Css:

<style>

svg.example:hover {

fill: #050505; transition: 1s;

}

svg.example {

fill: red; transition: 1s;

}

</style>

Svg

И вторая иконка facebook svg:

Абсолютно по такому же принципу:

Css:

<style>

svg.example2 {

fill: #0800ff;

border: 1px solid #0800ff;

padding: 5px;

width: 15px;

height: 15px;

}

svg.example2:hover {

border: 1px solid red;

fill: red;

}

</style>

Html:

Иконка facebook png

Нашел пару иконок facebook png.

Но вообще, сейчас, сегодня, я не стал бы заморачиваться с форматом png, либо с любым подобным форматом картинки - просто потому, что это одна большая проблема.

Другие типы и виды иконок прекрасно и просто стилизуются и мороки там в 10 раз меньше!

Но тем не менее. что мы можем сделать, если у нас вот такая иконка facebook в формате png.

Добавим немного стилей и получим:

html:

Css:

img.example_9 {

border: 1px solid #adadad;

width: 20px;

padding: 10px;

background-color: white;

transition: 1s;

}

img.example_9:hover {

background: aliceblue;

border: 1px solid black; transition: 1s;

}

Css:

img.example_10 {

width: 55px;

background-color: white;

transition: 1s;

}

img.example_10:hover {

background: #f0ff00;

}

И вот такая картинка facebook png.

Попробуем добавить увеличение. При наведении мышкой.

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

С position absolute :

Html :

</div>

Css:

img.class11:hover {

width: 55px;

transition: 0.5s;

}

img.class11 {

width: 50px;

transition: 0.5s;

position: absolute;

margin: -28px 0 0 0;

}

.example_img {

padding: 35px;

border: 1px solid #c4c4c4;

}

Не стесняемся говорить спасибо!

Теги:
facebook иконка
иконка facebook png
иконки facebook instagram
скачать иконку facebook
иконка facebook svg
facebook messenger иконка
fa fa facebook откуда брать иконки
цвет иконки facebook

На сайте сейчас :