Weird Output

[lgt]

I've been generating my custom Font Icon but the output is quite weird

here is the markup

<div class="social_icons">
                <ul id="share">
                    <li><i class="font-facebook"></i></li>
                    <li><i class="font-twitter"></i></li>
                    <li><i class="font-google"></i></li>
                    <li><i class="font-email"></i></li>
                </ul>
 </div>

here I have the generated CSS

    @font-face {
        font-family: "Font";
        src: url("./Font.eot?") format("embedded-opentype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Font";
        src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),
        url("./Font.ttf") format("truetype"),
        url("./Font.svg#Font") format("svg");
        font-weight: normal;
        font-style: normal;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        @font-face {
            font-family: "Font";
            src: url("./Font.svg#Font") format("svg");
        }
    }

    [data-icon]:before { content: attr(data-icon); }

    [data-icon]:before,
    .font-email:before,
    .font-facebook:before,
    .font-facebook-01:before,
    .font-google:before,
    .font-google-01:before,
    .font-twitter:before {
        display: inline-block;
        font-family: "Font";
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        line-height: 1;
        text-decoration: inherit;
        text-rendering: optimizeLegibility;
        text-transform: none;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
    }

    .font-email:before { content: "\f100"; }
    .font-facebook:before { content: "\f101"; }
    .font-facebook-01:before { content: "\f104"; }
    .font-google:before { content: "\f102"; }
    .font-google-01:before { content: "\f105"; }
    .font-twitter:before { content: "\f103"; }

and here I have the result