- Записки Белого Пингвина

Вариант 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

Вариант 1. Иконка через ::before и CSS (правильный способ для Font Awesome)