Footer Social Icon Css

Hi,
I’ve added fontello social icons to a widget in my site’s footer and I styled the icons using CSS.
When I go to a page on the site, the images don’t get styled but when I refresh the page, they do…
Any idea why it does that?

CSS:
/*Facebook Icon*/
#fbgg a {
color: #fff;
background: #382e30;
height: 55px;
width: 55px;
position: relative;
padding: 7px;
border-radius: 50%;
}
#fbgg a:hover {
color: #fff;
background: #d35946;
height: 55px;
width: 55px;
position: relative;
padding: 7px;
border-radius: 50%;
}
/*Instagram Icon*/
#instagg a {
color: #fff;
background: #382e30;
height: 55px;
width: 55px;
position: relative;
padding: 7px;
border-radius: 50%;
}
#instagg a:hover {
color: #fff;
background: #d35946;
height: 55px;
width: 55px;
position: relative;
padding: 7px;
border-radius: 50%;
}

HTML in widget:
<div class=’container’ >
<div class=”flex_column av_one_half flex_column_div av-zero-column-padding first avia-builder-el-0 el_before_av_one_half avia-builder-el-first ” style=’border-radius:0px; ‘>
<span id=”fbgg” class=”av_font_icon avia_animate_when_visible avia-icon-animate av-icon-style- av-no-color avia-icon-pos-right ” style=””>


</span>
</div>

<div class=”flex_column av_one_half flex_column_div av-zero-column-padding avia-builder-el-2 el_after_av_one_half avia-builder-el-last ” style=’border-radius:0px; ‘>
<span id=”instagg” class=”av_font_icon avia_animate_when_visible avia-icon-animate av-icon-style- av-no-color avia-icon-pos-left ” style=””>


</span>
</div>
</div>

Thanks