СКРИПТЫ
ТЕГИ:
php (319)
js (238)
html (145)
css (125)
html tags (62)
js tag (56)
jquery (41)
text (36)
js method (35)
js date (32)
php array (31)
form html (30)
fonts (27)
link (26)
Показать еще :
online (25)
ruweb.net (24)
foto (22)
php file (21)
atom (20)
forum (19)
hosting (18)
svg (18)
php date (17)
board (16)
html book (16)
input (16)
php time (16)
color (15)
js events (14)
js url (14)
notepad (13)
osclass (13)
htaccess (13)
img (13)
js time (13)
php img (12)
select (12)
знак (12)
table (12)
dw block (12)
info (12)
php path (12)
download (11)
keyboard (11)
jsphp (11)
form (11)
icon (11)
mouse (10)
yandex (10)
js delete (10)
hover (9)
dosite (8)
comment (7)
cookie (7)
php url (7)
year (6)
mysql (6)
iframe (6)
browser (6)
list (6)
click (6)
php get (6)
adminka (5)
tag a (5)
js math (5)
chart (5)
heading (5)
reg.ru (5)
mb (5)
search (5)
ftp (5)
js id (5)
value (5)
base64 (4)
week (4)
day (4)
ssl (4)
bbcode (4)
нок (4)
vk (4)
js form (4)
submit (4)
php var (4)
month (4)
pages (4)
symbols (4)
task (4)
console (4)
куб (3)
captcha (3)
domen (3)
js post (3)
line (3)
ucoz (3)
numbers (3)
padding (3)
js img (3)
https (3)
js hash (3)
vs code (3)
scandir (3)
рся (2)
seo (2)
prompt (2)
counter (2)
height (2)
google (2)
details (2)
js vars (2)
video (2)
sitemap (2)
tag hr (2)
youtube (2)
arrows (2)
typeof (2)
money (2)
qr kod (2)
нод (1)
rutube (1)
jino (1)
cursor (1)
header (1)
speed (1)
windows (1)
archive (1)
smile (1)
scroll (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;

    }

Можете не благодарить, лучше помогите!
Название скрипта :Svg иконка шрифт картинка facebook
Ссылка на скачивание : Все скрипты на одной странице
Теги :
facebook иконка
иконка facebook png
иконки facebook instagram
скачать иконку facebook
иконка facebook svg
facebook messenger иконка
fa fa facebook откуда брать иконки
цвет иконки facebook
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.027755 секунд. Подробнее