contact icons are double on my profile but not on the layout preview (help)

hey yall, sorry if i dont explain very clearly but basically i used this code to change my contact icons

<style>
/*CONTACT ICONS*/

.contact .inner a img {
    font-size: 0;}
.contact .inner a img:before {
    font-size: 1em;
    display: block}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
    /* Add to Friends */
    content: "🦷"}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
    /* Add to Favorites */
    content: "️"}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
    /* Send Message */
    content: "️"}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
    /* Forward to Friend */
    content: "🦷"}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
    /* Instant Message */
    content: "🦷"}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* Block User */
    content: "️"}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* Add to Group */
    content: "️"}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* Report Profile */
    content: "🦷"}

</style>

and on the layout preview it looks as expected :

any ideas as to why this is happening???