Задать вопрос
@Nub_Ready
Начинающий Front-end разработчик Опыт >6 месяцев
html

Wordpress меняет спец.символы html на свои svg, как исправить ситуацию?

Есть вот такой кусок говно-кода: 
<div class="close-btn">
    <span>&#10006;</span>
 </div>


Это кодировка крестика в HTML (он закрывает всплывающее окно), когда перенес верстку на wordpress, эта кодировка исправилась на: 

<img 
  draggable="false" class="emoji" alt="✖" 
  src="https://s.w.org/images/core/emoji/12.0.0-1/svg/2716.svg">


Я понял, что wordpress подключил свою библиотеку emolji или типа того, но в этом случае все мои стили на этот элемент слетают, что делать, как отключить эту хрень?
  • Вопрос задан
  • 385 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Чтобы отключить эмодзи от WordPress:
https://kinsta.com/knowledgebase/disable-emojis-wo...

Это не просто символ, это — эмодзи. А вы учли то, что эмодзи в разных системах — разные по внешнему виду? Ну отключите вы эмодзи WP, а толку, если этот крестик будет по-разному выглядеть? Поэтому WP и меняет этот кусок на свою картинку для того, чтобы эмодзи на вашем сайте выглядели в разных системах одинаково.

Вот тут примеры вида этого эмодзи в разных системах:
https://emojipedia.org/heavy-multiplication-x/

Поэтому такие вещи нельзя делать на эмодзи. На крайний случай, вот этот символ × используйте, если он есть в том шрифте, что вы используете на сайте. Но это не очень хорошая практика.

Современный путь — использовать простейшую SVG-иконку для таких вещей. Тогда вы не будете зависеть от систем и шрифтов. И ваша иконка будет выглядеть везде так, как вы хотите. Можно через #use, а можно вставить её разметку прямо в HTML, можно вообще через img или через CSS картинкой на фон блока кнопки.

SVG-иконки можно найти бесплатно и быстро тут:
https://www.flaticon.com/search?search-type=icons&...
https://thenounproject.com/search/?q=Cross

Ещё один современный путь — сверстать такой крестик:
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Устранить проблемы с парсерами и отображением новостей
18 апр. 2024, в 20:08
7000 руб./за проект
Ещё заказы