Strange bullet issue in widget menu

Hi,

Two things I don’t understand why this is happening:

1. I use Font Awesome for my bullets and they show up perfectly in all browsers but Safari. I can not figure out why.
2. In the second level of the submenu there are tiny dots visible although I use ul.sub-menu {list-style-type: none!important;}
See screenshot here

Best regards,
Steven

CSS used:

/*Submenu settings*/
.widget_nav_menu li:first-child, .widget_nav_menu li {
    border: 0px!important; 
}

.widget_nav_menu li a {padding:5px 0 0 0!important; color:#ffffff;font-size:14px;}
.widget_nav_menu li a:hover {background:none!important;color:#f8c57a;}
#top  .content .flex_column .widget_nav_menu ul:first-child > .current-menu-item{background-color: transparent;  color:#f9dbaf!important;}

.widget_nav_menu .current-menu-item > a, .widget_nav_menu .current_page_item > a {color:#f9dbaf!important;}
.widget_nav_menu .current-menu-item > a::before, .widget_nav_menu .current_page_item > a::before {color:#f9dbaf!important;}

.widget_nav_menu ul li a::before {
    text-align: center;
    content: "\f138";
    font-family: FontAwesome;
	font-size: 14px;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: -26px;
    top: 5px;
	}
ul.sub-menu  {list-style-type: none!important;}

.widget_nav_menu ul li a:hover::before {color:#f9dbaf;}
.widget_nav_menu ul{margin-left:26px!important;}