Strange characters in page view [duplicate]

I'm trying to replace my Javascript effects with CSS3. However, some strange characters appear on the top of the page. I'm also using FontAwesome

My CSS looks like this:

*{margin: 0; padding:0;}
.menu{width: 100%; height: 50px; background-color:#222; font-family:Arial, Helvetica, sans-serif;}
.menu ul{list-style:none; position:relative;}
.menu ul li{width: 150px; float:left;}
.menu a{padding: 10px; display:block; text-decoration:none; text-align:center; background-color:#222; color:#fff;}
.menu ul ul{position: absolute; visibility:hidden;}
.menu ul li:hover > ul{visibility: visible;}
.menu a:hover{background-color:#f4f4f4; color:#555;}
.menu ul ul li{float: none; padding-left:1px;  border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;}
.menu ul ul li a{background-color: #999;}
.menu ul li ul li { white-space: nowrap; }
.menu ul li ul li > a { display: inline-block; width: 100%; box-sizing: }
.menu ul li ul li > ul { display: inline-block;}
label[for="bt_menu"]{padding: 5px; background-color: #222; color: #FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:30px; cursor: pointer; width: 50px; height:50px;}
#bt_menu{display: none;}
label[for="bt_menu"]{display: none;}

 @media(max-width: 800px) { 
 label[for="bt_menu"] { display: block; } 
 #bt_menu:checked ~ .menu{ margin-left: 0; } 
 .menu{ margin-top: 5px; margin-left: -100%; transition: all .4s; } 
 .menu ul li { width: 100%; float: none; } 
 .menu ul ul { position: static; overflow: hidden; max-height: 0; transition: all .4s; } 
 .menu ul li:hover ul { height: auto; max-height: 200px; } 

}

HTML looks like this:

<input type="checkbox" id="bt_menu">
<label for="bt_menu">&#9776;</label>
<nav class="menu">
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Ve&iacute;culos</a>
            <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Seminovos</a></li>
                <li><a href="#">F&amp;I</a></li>
            </ul>
        </li>
        <li><a href="#">Pe&ccedil;as</a>
            <ul>
                <li><a href="#">Balc&atilde;o</a></li>
                <li><a href="#">Oficina</a>
                    <ul>
                        <li><a href="#">Mec&acirc;nica</a></li>
                        <li><a href="#">Funilaria</a></li>
                        <li><a href="#">Acess&oacute;rios</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Servi&ccedilos</a>
            <ul>
                <li><a href="#">Adm da Oficina</a></li>
                <li><a href="#">Mec&acirc;nica</a></li>
                <li><a href="#">Funilaria</a></li>
                <li><a href="#">Acess&oacute;rios</a></li>
            </ul>
        </li>
        <li><a href="#"><i>Back Office</i></a>
            <ul>
                <li><a href="#">Finan&ccedil;as</a></li>
                <li><a href="#">Rec Humanos</a></li>
                <li><a href="#">Controladoria</a>
                <ul>
                    <li><a href="#">Contabilidade</a></li>
                    <li><a href="#">Tributos</a></li>
                    <li><a href="#"><i>Compliance</i></a></li>
                    <li><a href="#">Tecn Informaç&atilde;o</a></li>                                                             
                </ul>
                </li>
                <li><a href="#">Contabilidade</a></li>
                <li><a href="#">Tributos</a></li>
                <li><a href="#"><i>Compliance</i></a></li>
                <li><a href="#">Tecn Informaç&atilde;o</a></li>                                                             
            </ul>
        </li>
        <li><a href="#">Jur&iacute;dico</a></li>
        <li><a href="#">Sair</a></li>
    </ul>
</nav>

And the result in the browser is this: