Icons

Hi
I am trying to edit the icons to use images and have a few issues:

In the preview the replacement image shows fine but not in the browser.
How do I recenter the icon in the space?
And how do I remove the blue circle?

This is some code I lifted from the support pages. thanks!

/* Icon Size */
[data-av_icon]:before {
font-size: 100px!important;
}
.iconbox_icon {text-align:centre !important;
margin-right:20px !important;
}

.bob .iconbox_icon:before { display: none; }
.bob .iconbox_icon { background-image: url(http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/flag7-1.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }