Вариант 1. Иконка через ::before и CSS (правильный способ для Font Awesome)
Шаг 1. Подключаем Font Awesome
Самый простой и надежный способ — подключить через CDN в <head> страницы. Для WordPress это делается через плагин типа Insert Headers and Footers или WPCode (в секцию «Header Scripts»)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
Важно: Если ты уже подключаешь FA где‑то в теме или плагине — этот шаг пропусти. Но убедись, что версия не конфликтует.
Шаг 2. Пишем CSS для ::before
Чтобы иконка появилась через псевдоэлемент, нужно:
- Указать
contentс кодом иконки (Unicode). - Задать
font-familyиз FA. - Задать размер и цвет.
- Позиционировать (обычно
absoluteвнутриrelativeродителя).
Пример для всех <pre>:
Где брать код иконки (\f121)
- Зайди на сайт Font Awesome.
- Найди нужную иконку (например,
code). - В деталях иконки будет «Unicode» — это и есть значение для
content(в CSS пишут как\f...).
Частые проблемы и решения
- Вместо иконки — пустой квадрат. Скорее всего, не подключен CSS FA или
font-familyуказан неверно. Проверь консоль браузера (F12 → Console) на ошибки загрузки файла. - Иконка обрезана. Проверь
overflowу родителя. Если у какого‑то предка стоитoverflow: hidden, иконка (которая позиционирована абсолютно) будет обрезана. - Иконка не появляется. Проверь специфичность селектора. Если какой‑то другой CSS перебивает твои стили, добавь
!importantвременно для теста.
Вариант 2. Иконка через JS (если CSS не работает или нужно динамически)
Этот способ хорош, когда:
- Не хочется возиться с
::beforeиoverflow. - Блоки кода подгружаются динамически (AJAX, Gutenberg, infinite scroll).
- Нужно точно контролировать, куда и как вставить иконку.
JS + Font Awesome (через тег <i>)
Куда вставлять: в плагин для скриптов (WPCode, Insert Headers and Footers) в секцию «Before </body>» или «Custom JS».
Условие: Font Awesome должен быть подключен (CSS), иначе классы
fa-solid fa-codeне сработают.
JS + SVG (самый надежный, вообще не зависит от FA)
Если не хочешь зависеть от шрифтов, используй SVG. Это полностью автономно.
Плюсы:
- Работает всегда, даже если FA не подключен.
- Не зависит от кэша шрифтов и блокировщиков рекламы.
- Цвет и размер заданы прямо в SVG.
Что выбрать и когда
| Ситуация | Решение |
|---|---|
| Нужно быстро и «по‑правильному» | CSS + ::before + FA |
Есть проблемы с overflow или специфичностью |
JS + <i> или JS + SVG |
| Блоки кода подгружаются динамически | JS (желательно с MutationObserver для новых элементов) |
| Хочется максимальной надежности и независимости | JS + SVG |
Продвинутый вариант: поддержка динамических блоков (MutationObserver)
Если блоки кода появляются после загрузки страницы (например, при переключении вкладок или ленивой подгрузке), обычный DOMContentLoaded не поможет. Используй «сторожа»:
Частые ошибки и как их избежать
- Лишние отступы внутри
<pre>. Если в HTML между<pre>и первой строкой кода есть переносы и табы, текст «уедет» вправо. Это не баг скрипта — это особенность тега<pre>. Убирай отступы в редакторе статьи. - Дублирование иконок. Если запускаешь скрипт несколько раз или добавляешь его в разные места — иконки могут появиться дважды. В примере с SVG я добавил проверку: если иконка уже есть — не добавлять.
- Конфликт с подсветкой синтаксиса. Некоторые плагины подсветки сами добавляют обёртки и стили. Если иконка «ломает» верстку, попробуй уменьшить
margin-rightили использоватьposition: absoluteв CSS вместо вставки в поток.
Практический совет
Для твоей задачи (иконка слева от блока кода) я рекомендую начать с JS + SVG (простой вариант без MutationObserver). Он сразу решает проблему с отсутствием шрифта и не зависит от overflow. Если позже понадобится более гибкая кастомизация — перейдешь на CSS с ::before.
1 Документация по подключению библиотек через CDN
2 Спецификация псевдоэлементов и наследование шрифтов в CSS
