Search code examples
htmlwebstormjetbrains-ide

Icons/emojis not rendering in browser and displaying symbols when displaying page in browser while running from WebStorm IDE

I am developing a HTML page. I have a book icon in the page under <h1> tag. File name is index.html. When I run the page directly by double clicking it... it displays the book icon on the browser. When I run the page by clicking Firefox icon from inside WebStorm IDE... it displays some symbols instead of book icon.

Is it because of WebStorm or did I miss anything in HTML??

Below are the screenshots:

WebStorm IDE screenshot with book icon

enter image description here

Output displayed on the browser

enter image description here

I tried to solve this by going through the JetBrains documentation. Couldn't find a solution.

My expected result is... the icons which are placed in the HTML file should be displayed properly in browser when running it from WebStorm IDE.

Solution

  • To the above-mentioned problem given below is the answer.

    <head>
    <meta charset="UTF-8"/>
    <title>The Basic Language of the web: HTML</title>
</head>

    I added the <meta charset="UTF-8"/> inside the head tag to mention the character set and it solved the problem.