Replace mega menu arrows with custom icon

Hi, I try to use this css code to Replace mega menu arrows with custom icon, that I found on Enfold Documentation in the Mega menu page, but it doesn’t work.
I see the text e812 instead the icon

/* Mega menu arrows */

#top .avia-bullet {
  border: none!important;
  background:red!important;
    padding:0;
    margin: 0 10px 0 0!important;    
}
#top .avia-bullet:before {
    content: "e812";
    font-family: 'entypo-fontello';    
    font-size:11px;
    line-height:1em;
    position:absolute;
    top:10px;
    left:-3px;
}