Иконка на потив текста как на скриншоте

Question

Добрый день. Не могу понять как автор подвязал изображения к тексту, при этом css не использовался Ниже прикрепляю код html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <a href="#">
                <i class="fa-brands fa-facebook-f"></i>
                <span> - Facebook</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-brands fa-x-twitter"></i>
                <span> - Twitter</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-brands fa-tiktok"></i>
                <span> - TikTok</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa-brands fa-instagram"></i>
                <span> - Instagram</span>
            </a>
        </li>
    </ul>
</body> 
<html>

Answer 1

Это специальные шрифтовые иконки, в примере это Font Awesome.

Они работают как обычный текст, располагаются при помощи display: inline, по этом их можно просто вставиться рядом с текстом без использования CSS.
Их плюс, в отличии от картинок:
* Лучше качество, при разных размерах - потому, что это векторное изображение;
* Возможность стилизации:

a {
  color: #333;
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: red;
}

<link href="//use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<a href="#"><i class="fab fa-html5"></i> - HTML</a>

Из минусов:
- Если использовать фулл билд (со всеми иконками и вариациями, как многие используют) - большой вес и много запросов, следовательно, дольше загрузка;
- Цена (да, это платно) - на данный момент 99$ за год по тарифу Pro и 499$ за год по тарифу Pro Max

Но и картинку можно расположить так же, без использования CSS, потому что по дефолту она тоже display: inline:

a {
  color: #333;
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: red;
}

<a href="#"><img src="https://i.imgur.com/TAFck96.png" height="16" alt=""> - HTML</a>

БЛОГ НА HUSL

Иконка на потив текста как на скриншоте

Ответы (1 шт):