Background not visible behind the "whitespace" of a Unicode Character

Question

I am using a sunburst behind a unicode character (eye, &#128065), with a CSS of:

.the-eye{
    width:100%;
    border-radius:50%;
    box-shadow: 0 0 20px 10px #eeee11;
}

HTML:

<span class="the-eye">&#128065;</span>

However, instead of a clean yellow background behind it, I see a white circle which appears to be rendered as part of the eye graphic. Is there a way to make that white part of the unicode transparent?

Verified on Chrome and Firefox.

Answer 1

@Paulie_D is correct: set the background-color to the same as the shadow.

.the-eye{
    width:100%;
    border-radius:50%;
    font-size: 50pt;
    box-shadow: 0 0 20px 10px #eeee11;
    background-color: #eeee11;
}

<span class="the-eye">&#128065;</span>