Войти
Меню :
icon (11)



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

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

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

    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
    Несколько видов иконок Facebook
    Css:

    img.example_10 {

    width: 55px;

    background-color: white;

    transition: 1s;

    }

    img.example_10:hover {

    background: #f0ff00;

    }

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

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

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

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

    С position absolute :

    Несколько видов иконок Facebook
    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;

    }

Не стесняемся говорить спасибо!
О комментах : 05.11.2024
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Друзья! Пожалуйста держите себя в рамках приличия!
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
Помочь проекту DwWeb.ru

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

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

Теги:
facebook иконка иконка facebook png иконки facebook instagram скачать иконку facebook иконка facebook svg facebook messenger иконка fa fa facebook откуда брать иконки цвет иконки facebook
На сайте сейчас :
dwweb.ru есть здесь:
Все соцсети в одном месте!
Ещё :Игра "пятнашки"
Угадай страну по флагу
+
Как сделать сайт?
Md5 онлайн
Списки шифрования
Sitemap.html
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Лучший хостинг : RUWEB + помощь по RUWEB Сайт работает круглосуточно 24/7.
Страница загружена за : 0.030968 секунд.