В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
icon (11)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

Несколько видов иконок 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. Скачать

  1. Использование "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;

    }


  2. 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>


  3. Иконка facebook png

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

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

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

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

    иконка facebook png

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

    иконка 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;

    }

    иконка facebook png
    иконка facebook png
    Css:

    img.example_10 {

    width: 55px;

    background-color: white;

    transition: 1s;

    }

    img.example_10:hover {

    background: #f0ff00;

    }

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

    иконка facebook png

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

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

    С position absolute :

    иконка facebook png
    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;

    }

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.022393 секунд. Подробнее