Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

Сделаем подборку разных иконок facebook, шрифт awesome и иконка "fa fa-facebook" + иконки facebook в форматах svg, png. Будем регулировать цвет, размер иконки facebook.
Если вы не знаете, что такое awesome, то настоятельно рекомендую! Svg - периодически использую, когда в "awesome" нет иконки. А "Png" - давно не использую, очень неудобно, по сравнению с двумя выше перечисленными!

иконка facebook в нескольких форматах:

  1. Использование "fa fa-facebook", цвет, размер, стилизация
  2. Facebook svg
  3. Иконка facebook png
  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" очень-очень скучная.

    Но мы можем её модифицировать! Например так:

    Или смотри справа, такой же вариант в сайдбаре, только круглый!

    Показать



    Сразу несколько кнопок соцсетей и в том числе и facebook

    В качестве примера стилизации кнопки facebook :





    Показать

  2. facebook svg

    Следующим пунктом разберем иконку facebook в формате svg код :

    Иконка facebook svg

    Вообще иконок facebook svg - огромное количество! Я не смогу составить конкуренцию специализированным сайтам по иконкам, но некоторые возможности стилизации данных иконок, надеюсь, вам будут полезны.

    Иконка логотип facebook на черном фоне

    Простой код facebook svg:

    Показать

    Очень простая стилизация facebook svg

    Изначально добавим цвет, почему цвет facebook svg - должен быть синим!7 Хочу красным!

    И добавим эффект hover

    Показать

    И вторая иконка facebook 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;

    }


Вас может еще заинтересовать список тем : #ICON | #FONT_AWESOME |
Последняя дата редактирования : 19.12.2020 10:07
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
facebook иконка иконка facebook png иконки facebook instagram скачать иконку facebook иконка facebook svg facebook messenger иконка fa fa facebook откуда брать иконки цвет иконки facebook

Последние комментарии :
Марат :
26/01/2021 12:28
Внимание! На странице описывается система комментирования ECOMMENT.SU.Здесь и далее, на всем сайте, стоит другая…
подробнее.
Марат :
26/01/2021 10:58
На сайте, комментирование моё собственное, которое не знаю, когда …
подробнее.
Вали :
26/01/2021 05:51
А вот эти комментарии тут - это же другие, не те о которых статья?Не…
подробнее.
Вали :
26/01/2021 05:44
Привет, классно!
подробнее.
Марат :
25/01/2021 10:08
Спасибо за добрые слова!Всегда пожалуйста!Приходите…
подробнее.