Несколько видов иконок Facebook
Сделаем подборку разных иконок facebook, шрифт awesome и иконка "fa fa-facebook" + иконки facebook в форматах svg, png. Будем регулировать цвет, размер иконки facebook.
Если вы не знаете, что такое awesome, то настоятельно рекомендую! Svg - периодически использую, когда в "awesome" нет иконки. А "Png" - давно не использую, очень неудобно, по сравнению с двумя выше перечисленными!
Иконка facebook в нескольких форматах:
Использование "fa fa-facebook", цвет, размер, стилизация<
Начнем с темы економічного шрифта "FONT_AWESOME" и использованием иконки "fa fa-facebook"
Я уже рассматривал несколько тем про FONT_FONT_AWESOMEДля того, чтобы данная иконка заработала у вас на сайте требуется : подключить FONT AWESOME.
И поместить код иконки на сайт в том месте, в котором требуется:
Результат вывода иконки "fa fa-facebook" по умолчанию:
К данной иконки, сейчас ничего не подключено, кроме стилей по умолчанию, которые находятся в установленном файле css, у нас он здесьКак видим, что наша "иконка facebook" очень-очень скучная.
Но мы можем её модифицировать! Например так:
Или смотри справа, такой же вариант в сайдбаре, только круглый!
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 :
Html + css
<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>
.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
<style>
svg.example:hover {
fill: #050505; transition: 1s;
}
svg.example {
fill: red; transition: 1s;
}
</style>
<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 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>
<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>
<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">
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;
}
img.example_10 {
width: 55px;
background-color: white;
transition: 1s;
}
img.example_10:hover {
background: #f0ff00;
}
И вот такая картинка facebook png.
Попробуем добавить увеличение. При наведении мышкой.
Для данного эффекта, чтобы окружение не смещалось, нужно поместить в отдельный блок.
С position absolute :
<div class="example_img">
<img src="https://dwweb.ru/__img/page/2020_12_10_09_41.png" class="class11" alt="replace" title="replace">
</div>
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;
}
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: