Dziwne prostokąty obok ikon Fontello (HTML/CSS)

Question

Dzień dobry, wskazany w tytule problem sprowadza się do obecności dziwnych prostokątów w sąsiedztwie poprawnie wyświetlanych ikon fontello. ChatGPT sugeruje, że są one objawiem nieprawidłowości przy renderowaniu znaków, ale nie za bardzo wiem co z tym zrobić dalej. 
Zamysł jest taki, by przyciski były ikonkami fontello umieszczonymi na okrągłych buttonach, które zamiast tego rozciągają się by pomieścić dziwne "prostokąty.

Poniżej wklejam powiązane fragmenty kodu HTML i CSS.
HTML(sekcja head):

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="Fontello1/css/kampus1.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap" rel="stylesheet">

HTML(sekcja body):

<div id="top_bar">DUPA<button id="sign_in">Zaloguj</button><button id="search"><i class="demo-icon icon-search">&#xe801;</i></button><button id="language"><i class="demo-icon icon-globe">&#xe807;</i></button>
 </div>

CSS
 

#search
{
    float: right;
    margin-left: 10px;
    margin-top: 20px;
    margin-right: 10px;
    
    background-color: #325d98;
    font-size: 20px;
    color: white;
    padding: 10px 16px;
    
    border: none;
    border-radius: 30px;
    cursor: pointer;
}

#language
{
    float: right;
    margin-left: 500px;
    margin-top: 20px;
    margin-right: 10px;
    
    background-color: #325d98;
    font-size: 20px;
    color: white;
    padding: 10px 16px;
    
    border: none;
    border-radius: 30px;
    cursor: pointer;
}

 

Comments

Trudno coś powiedzieć na podstawie tego fragmentu, bo nie ma w niej załadowanego fonta Fontello. Mógłbyś gdzieś pokazać całość?

Answer 1

Zapisz po prostu tak

  <button id="search"><i class="demo-icon icon-search"></i></button>
  <button id="language"><i class="demo-icon icon-globe"></i></button>

bez &#xe801; i &#xe807;

Comments

Ogromnie dziękować :)