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

Question

[Александр Курбатов]

Есть вот такой кусок говно-кода:

<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 или типа того, но в этом случае все мои стили на этот элемент слетают, что делать, как отключить эту хрень?

Answer 1

[Rustam Bainazarov]

Чтобы отключить эмодзи от 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

Ещё один современный путь — сверстать такой крестик: