phpjsJqueryhtmlcssblog

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

Сделаем подборку разных иконок facebook, шрифт awesome и иконка "fa fa-facebook" + иконки facebook в форматах svg, png. Будем регулировать цвет, размер иконки facebook.
Если вы не знаете, что такое awesome, то настоятельно рекомендую! Svg - периодически использую, когда в "awesome" нет иконки. А "Png" - давно не использую, очень неудобно, по сравнению с двумя выше перечисленными!

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

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

Скопировать ссылку



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

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

Я уже рассматривал несколько тем про FONT_FONT_AWESOME


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

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

<i class="fa fa-facebook" aria-hidden="true"></i>

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

К данной иконки, сейчас ничего не подключено, кроме стилей по умолчанию, которые находятся в установленном файле css, у нас он здесь
Как видим, что наша "иконка facebook" очень-очень скучная.


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

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

Html + css показать
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 :







Html + css показать
html:

<div class="container">

<div class="submenu">

<span><a href="#"><i class="fa fa-vk"></i></a></span>

<span><a href="#"><i class="fa fa-facebook"></i></a></span>

<span><a href="#"><i class="fa fa-twitter"></i></a></span>

<span><a href="#"><i class="fa fa-instagram"></i></a></span>

</div>

</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:

svg код показать

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg>

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

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


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

svg + css показать
css:

<style>

svg.example:hover {

fill: #050505; transition: 1s;

}

svg.example {

fill: red; transition: 1s;

}

</style>

svg

<svg class="example" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg>

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

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

svg показать

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>

svg + css показать
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:

<svg class="example2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg>

Скопировать ссылку



иконка facebook png

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


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

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

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



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



html:

<img class="example_9" src="https://dwweb.ru/__img/page/2020_12_10_09_39.png"alt="replace" title="replace">

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 class="example_img">

<img src="https://dwweb.ru/__img/page/2020_12_10_09_41.png" class="class11" alt="replace" title="replace">

</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;

}

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---