Как показывать изображение по нужному символу на сайте?

Question

[Иван]

Как сделать чтобы вместо символов было изображение?
К примеру на знак &==; выводился рисунок равно, или другой рисунок

Answer 1

[Nikita]

Ну так,

if(текст == '&==') { 
рисунок;
}

не?

Comments

[Иван]

Можно код, если не сложно.

[Nikita]

MelDe, нет, не шарю в JS.

Answer 2

[Никита Юдин]

Можно использовать разные способы, самым эффективным на мой взгляд, это замена символов на картинки во время сборки проекта, с помощью любого сборщика.

Вот способ с помощью CSS
1. Оборачиваем в html нужные символы в span с классом.
<span class="nameClass">&==;</span>
2. В css прописываем

.name {
  text-indent: -9999px;
  display:block;
  }

.name:before {
  content: url(image.png);
  position: absolute;
  top: 0;
  left: 9999px;
  }

https://codepen.io/anon/pen/NZMOwG

Comments

[Шохрух Шаймардонов]

Думаете сработает? Как мне помнится с дисплэй ноун бифо не работает

[Никита Юдин]

Шохрух Шаймардонов, да, действительно display none не сработал. Нашел другой способ:

.name {
  text-indent: -9999px;
  display:block;
  }

.name:before {
  content: url(image.png);
  position: absolute;
  top: 0;
  left: 9999px;
  }

[Шохрух Шаймардонов]

Никита Юдин, ну главное, чтобы автору подошел

[Иван]

Никита Юдин, а как картинку уменшить к примеру до 50px на 50px попробовал в вашем коде поставить ширину и высоту, как max так и просто и не меняется.

[Никита Юдин]

MelDe, к сожалению таким способом никак не изменить размер изображения. Максимум могу посоветовать приготовить несколько размеров для одной картинки и использовать их в названиях класса.
<span class="img-100 img-300">

Способ получается максимально костыльным, я бы советовал искать другое решение.