SVGs & WordPress

[mintertweed]

I have SVGs on my WordPress home page, here. If you scroll down, you’ll see my issue. To make sure that I was doing everything properly, I also created this mockup in CodePen using the same exact code. The mockup looks fine and is working properly except for the added four pixels of margin at the bottom of each SVG. I will give a virtual hug to anyone who can help me with making the SVGs appear properly on my WordPress website. Extra credit for the person who can figure out how to get rid of that four extra pixels at the bottom of the SVGs. Thanks in advance!

Edit: I suspect this is an HTML problem, but I’m not entirely sure.

[chrisburton]

.social-widget {
    height: 32px; /* fixed */
    ....

[mintertweed]

Thank you, @chrisburton. I knew the extra space had to be something simple. I kept playing with margin and padding. I don’t know why it didn’t occur to me to mess with the height. Boo upon me. Now, I just need to figure out why WordPress won’t display the SVGs properly.

[chrisburton]

What do you mean? You mean where the RSS is above the rest? I think it has to do with the first icon (RSS).

[mintertweed]

I placed the SVGs in an img tag and everything is displaying properly except for the colors. Is there any way to place an SVG in a tag and retain control over the colors within the SVG?

[mintertweed]

@chrisburton, That’s after I placed the SVGs in img tags. Before, I was using the raw XML and it displays fine in CodePen, but not so much in WordPress. Now I have img src pointing to the SVG file, but I lose all control over the fill color when I do this.

[chrisburton]

I think the best way to handle this is with icon fonts. You can upload your own SVG and convert them to a font file with icomoon.io

Just go here: http://icomoon.io/app/

Then, choose import.

[mintertweed]

Interesting. After I do that, would I then use @font-face? And control the encapsulating area with basic CSS?

[chrisburton]

Exactly.

[Author]

Posts