Смайлики превращаются в странные символы

#html #css #heroku

#HTML #css #heroku

Вопрос:

Я, наконец, закончил веб-сайт и опубликовал его на heroku, но я заметил странную вещь, все смайлики превратились в странные символы:

Когда я запускал HTML-файл на своем компьютере, это то, что я получал изображение на ПК

Но после того, как он, наконец, начал работать на heroku, это то, что я бы получил: Изображение в публикации heroku

Я не знаю, как это исправить, и в Интернете я не нашел ничего, что могло бы помочь. Это часть html, которая у меня есть:

 <div class="description">
                    <p>
                    🍬  Well, I see you have discovered Candy Lounge!  🍬
                    </p>
                    <p>
                    What makes us special?
                    </p>
                    <p>
                    🎉 We host loads of Giveaways! 🎉
                    </p>
                    <p>
                    🎮 We have GameNights 🎮 
                    </p>
                    <p>
                        🙂 We have a very friendly owner , very friendly and helping staff 🙂 
                    </p>
                    <p>
                        🔢 We have a counting channel and we are trying to be the top on the leaderboard! 🔢
                    </p>
                    <p>
                        🍭 Loads of roles for you to collect 🍭 
                    </p>
                    <p>
                        👐 Decision of the week! 👐
                    </p>
                    <p>
                        👥 Open for partners 👥
                    </p>
                    <p>
                        🐸 Memes 🐸 
                    </p>
                    <p>
                        🎨 A channel for you to post your own amazing and creative art! 🎨
                    </p>
                    <p>
                        🎵 A channel for you to post your own great and perfect songs! 🎵 
                    </p>
                    <p>
                        🎬 A place for you to advertise your own server and grow your own community 🎬
                    </p>
                    <p>
                        🎤 Loads of voice channels so we can hear your amazing voices 🎤 
                    </p>
                    <p>
                        This is not just a normal server. its a family friendly server where you can have fun and get to know more people!
                    </p>
                    <p>
                        🔗https://discord.gg/DEvtq2k🔗
                    </p>
                </div>
  

Как мне превратить эти символы в настоящие смайлики?

Ответ №1:

вы должны добавить <meta charset="UTF-8"> , чтобы ваши смайлики отображались последовательно в разных браузерах.

Метод кодирования символов UTF-8 используется для преобразования введенных вами символов в машиночитаемый код.

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div class="description">
    <p>
      🍬 Well, I see you have discovered Candy Lounge! 🍬
    </p>
    <p>
      What makes us special?
    </p>
    <p>
      🎉 We host loads of Giveaways! 🎉
    </p>
    <p>
      🎮 We have GameNights 🎮
    </p>
    <p>
      🙂 We have a very friendly owner , very friendly and helping staff 🙂
    </p>
    <p>
      🔢 We have a counting channel and we are trying to be the top on the leaderboard! 🔢
    </p>
    <p>
      🍭 Loads of roles for you to collect 🍭
    </p>
    <p>
      👐 Decision of the week! 👐
    </p>
    <p>
      👥 Open for partners 👥
    </p>
    <p>
      🐸 Memes 🐸
    </p>
    <p>
      🎨 A channel for you to post your own amazing and creative art! 🎨
    </p>
    <p>
      🎵 A channel for you to post your own great and perfect songs! 🎵
    </p>
    <p>
      🎬 A place for you to advertise your own server and grow your own community 🎬
    </p>
    <p>
      🎤 Loads of voice channels so we can hear your amazing voices 🎤
    </p>
    <p>
      This is not just a normal server. its a family friendly server where you can have fun and get to know more people!
    </p>
    <p>
      🔗https://discord.gg/DEvtq2k🔗
    </p>
  </div>
</body>
</html>