maratdev / add-icon

Как добавить иконку

Как добавить иконку

Типичная ситуация: у вас есть элемент, а рядом с ним - иконка, как, например, здесь (макет "Cat Energy"):

Иконку можно экспортировать из макета в таком виде:

Но как добавить её на страницу? Очевидно, что это декоративный элемент, и мы не будем добавлять его в разметку. Добавим его псевдоэлементом. Часто встречаю такую реализацию: под иконку создаётся контейнер, иконка подкладывается фоном, выравнивается внутри него, контейнер абсолютом выравнивается в левом паддинге исходного элемента. Такой css может выглядеть примерно так:

Не самая удачная реализация

.mass-gain {
    position: relative;
    padding-left: 165px;

    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 100px;
}

.mass-gain::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 0;

    width: 100px;
    height: 100px;

    background-color: #68b738;
    border-radius: 50%;
}

.mass-gain::after {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;

    width: 134px;
    height: 56px;

    background-image: url('img/panther.png');
    background-repeat: no-repeat;
}

Результат тут

Это нормальное решение, оно работает, но посмотрите, сколько кода мы написали, а задача вроде стояла простая - добавить одну иконку слева от блока текста. К тому же такое решение довольно чувствительно к размеру иконки, то есть такой css плохо переиспользуем. Можно ли проще? Да, можно. Мы могли бы экспортировать иконку сразу с зелёным кружком, несмотря на то, что умеем рисовать его на css - это избавило бы нас от блока кода ::after {}, но мы всё равно остались в рамках текущей реализации: absolute + background + padding. Можно ли ещё проще? Можно.

Реализация лучше

.mass-gain {
    display: flex;
    align-items: center;

    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 36px;
}

.mass-gain::before {
    content: url('img/panther.png');

    display: flex;
    justify-content: center;
    align-items: center;

    margin-right: 65px;
    width: 100px;
    height: 100px;

    background-color: #68b738;
    border-radius: 50%;
}

Никаких абсолютов и прочих зыбких решений - только гибкие флексбоксы. Иконка добавляется через свойство content, правым маргином отталкивает от себя текстовый блок, что очень важно - находится в потоке. Просто добавив селектору .mass-gain свойство flex-direction: column;, мы можем поместить иконку над текстовым блоком. Подумайте, сколько свойств нам пришлось бы переопределить для реализации выше?

Результат тут

А если экспортировать иконку с зелёным кружком, наш код сокращается ещё существеннее.

Вполне достойная реализация

.mass-gain {
    display: flex;
    align-items: center;

    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 36px;
}

.mass-gain::before {
    content: url('img/panther-with-circle.png');
    margin-right: 65px;
}

Результат тут

Последние два решения кроссбраузерные, простые и очевидные. Добавляемая иконка остаётся в потоке, это избавляет нас от многих потенциальных проблем с перекрыванием иконки другими элементами страницы, например, при переполнении. А флексовый контейнер позволяет лёгким способом менять её положение, что может быть полезно при создании адаптивных интерфейсов.

Иконки-символы

Отдельно стоит сказать про иконки-символы, как, например, здесь:

Может показаться, что иконку-стрелку нужно экспортировать из макета (непременно в svg-формате) и добавить на страницу одним из описанных выше способов. На самом деле нет ничего проще, чем добавить её символом юникода. Обычно я пользуюсь сайтом unicode-table.com, вбиваю в поиске, что хочу найти, например, "стрелка вправо", в результатах нахожу нужный мне символ и копирую. Мне кажется, "Стрелка направо с треугольным остриём" - то, что нужно. Я мог бы добавить её в css таким образом:

.link {
    display: flex;
    align-items: center;

    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: #000000;
    text-decoration: none;
}

.link::after {
    content: '⭢';
    margin-left: 20px;
    font-size: 30px;
    line-height: 1;
    padding-bottom: 3px;
}

А мог бы добавить в html и стилизовать:

<a href="" class="link">КАТАЛОГ SLIM <span class="link__arrow">⭢</span></a>

.link {
    display: flex;
    align-items: center;

    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: #000000;
    text-decoration: none;
}

.link__arrow {
    margin-left: 20px;
    font-size: 30px;
    line-height: 1;
    padding-bottom: 3px;
}

Разница только в том, что во втором случае стрелка будет присутствовать на странице в явном виде, даже если по какой-то причине не сработают стили.