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

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

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

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

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

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

    С position absolute :

    иконка facebook png
    иконка 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
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
07.07.2022 13:02
Вам спасибо, что оценили! На ваш вопрос в одной строчке не ответишь, поэтому для вас отдельный пункт…
подробнее.
Борис :
07.07.2022 10:41
Спасибо за статью! Подскажите, пожалуйста, как сделать, чтобы файл создавался по имени из формы? Есть тест,…
подробнее.
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
ruweb
Страница загружена за : 0.031637 секунд. Подробнее