<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Кастомизация иконок FontAwesome

Кастомизация иконок FontAwesome

Мне нравиться использовать шрифтовые иконки из библиотеки FontAwesome, потому что их легко кастомизировать под любую цветовую гамму сайта.

HTML разметка + центрирование + ссылка на FontAwesome

Названия классы нужных иконок мы копируем из библиотеки FontAwesome и вставляем их в тег i.

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>


<ul>
    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>


// позиционирование иконок в центре экрана
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f5f5f5;
}


Кастомизация иконок FontAwesome.

Меняем расположения иконок

По умолчанию иконки расположены вертикально, но это легко изменить, если создать гибкий контейнер для тегов li. Свойство display: flex поменяет ориентацию позиции иконок на вертикальную.

ul{
    position: relative;
    display: flex; / * гибкий контейнер * /
}
ul li{
    position: relative;
    list-style: none;/ * удаление маркеров * /
}


Кастомизация иконок FontAwesome.

Стилизация иконок

Умелое использование CSS-свойств, может привести к эффектному результату.

ul li a{
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    margin: 0 10px;
    text-decoration: none; / * убираем подчеркивание * /
    font-size: 30px;
    border-radius: 50%; / * рисование круга * /
    color: #e2e2e2;
    box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2), / * создание теней * /
        2px 2px 5px rgba(0,0,0,0.2);
     transition: 0.5s; / * плавный переход * /
}


Кастомизация иконок FontAwesome.

Псевдоэлемент before придаст завершенный вид иконкам.

ul li a .fa {
    color: #fff;
    position: relative;
    z-index: 1; / * иконку на верхний слой * /
}
ul li a:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: #cfd8dc;
}


Кастомизация иконок FontAwesome.

Эффект при наведении

При наведении мыши, иконки будут плавно приподниматься вверх, подтягивая за собой едва заметную мягкую тень.

ul li a:hover{
    color: #999;
    transform: translateY(-20px); / * трансформация вверх на 20 пикселей * /
    box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2), / * создание теней * /
        2px 24px 10px rgba(0,0,0,0.1);
}


Кастомизация иконок FontAwesome.

Посмотрите пример на CodePen

Всем начинающим верстальщикам, необходимо выучить самые основный CSS-свойства, как азбуку. Переходите по ссылке и вы узнаете почему это так важно, видеокурс "Вёрстка сайта с нуля 2.0"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.