Я смотрю на лист css для страницы реагирования, и многие классы используют контент для создания изображений, но отображение контента в VSCode — это
Я копаюсь в существующем сайте reactJS, и многие изображения отображаются с использованием свойства содержимого css. Я смотрю на лист css в VSCode, и многие классы появляются с содержимым, указанным как «». Я не уверен, нужен ли мне плагин для просмотра фактического контента, но я не могу найти способ увидеть его на данный момент.
Я могу использовать атрибут alter content, чтобы указать на другое изображение, но хочу знать, где оно генерируется, чтобы изменить его в источнике. Сайт настроен на использование Contentful, но активы там вызываются непосредственно на страницах, а не в css.
.fa-discord:after {
content: "";
}
Я хотел бы иметь возможность отслеживать, где это изображение хранится или генерируется. Любая помощь приветствуется!
Ответы 1
Это значок Шрифт потрясающий для Discord, его можно найти здесь. Да, вам нужно включить Font Awesome на свой веб-сайт, если вы хотите отобразить любой из их значков глифов. И вы можете легко определить, пытается ли веб-сайт использовать значки глифов Font Awesome или нет, поскольку все их селекторы начинаются с fa- и заменяют content.
Иконки Font Awesome генерируются с помощью включенного файла CSS, который чаще всего находится в папке, например /fonts/font-awesome/css/font-awesome.min.css.
Этот файл использует символы Юникода для создания соответствующих представлений глифов, а специальный символ Юникода для значка Discord — 392. Таким образом, content: "\f392" отобразит соответствующий значок глифа.
Если вместо фактического глифа отображается прямоугольник или квадрат, это означает, что используемый вами шрифт не включает этот конкретный глиф Unicode. Font Awesome быстро расширяет охват глифов Unicode, и вам нужно будет обновить Font Awesome как минимум до версии 5.0.0, чтобы использовать глиф Discord.