CODEWITHSUNDEEP
cssclippingicon-fonts
Lumnezia
Lumnezia

Reputation: 796

Icon-font cuts off top of icon

I'm rather new to icon-fonts in CSS and now ran into the following Problem: I have several boxes containing an Icon. Sadly the upper part of the icon get's cropped off.

I found out, that the icon-font I'm using is adding a ::after-pesudo-element which is slightly offset to the original element and that causes the part that is cut off. (See Screenshots)

(The Icon-Font I'm using is http://linea.io)

Element ::before Pseudo Element

I inverstigated furhter and realized that this only occured due to the fact that I have the following CSS on the Icon:

-webkit-background-clip: text;
color: transparent;

If I remove this, the Icon-Color will become black and be shown whole.

I don't know if this is due to a bug in my CSS since I couldn't find anything on the web.

But I removed almost all of my personal CSS and the bug still occured.

Upvotes: 1

Views: 1355

Answers (1)

Edgar Quintero
Edgar Quintero

Reputation: 4441

Those don't look like CSS fonts, they're simply SVGs. That off set error you see tends to happen when the viewBox, height, or width of the SVG isn't correct. If you still need to use them you should inline them, just copy and paste the SVG code.

Taken from the link you posted:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
    <circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="22" r="6"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M53,22.735C52.948,10.73,43.599,1,32,1
        s-21,9.73-21,21.735C11,38.271,31.965,63,31.965,63S53.069,38.271,53,22.735z"/>
</g>
</svg>

If you prefer to use a real CSS icon library, I'd recommend using something a bit a more tested such as Font Awesome. But these are a dime a dozen and if you Google you could potentially find something you like.

Upvotes: 0

Related Questions