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

Кастомизация иконок 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»

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий

четыре × 5 =