[juiceweddingbandParticipant]

Hi,

I’m in the middle of making a page at the moment, and have been using a lot of icons. I wanted to use svg icons, as the options were pretty restricted with the icon fonts. I have the icons displaying ok, but no matter what I do, I can’t get the padding to look the same on the browser as it does in cornerstone (which is correct most of the time, although occasionally it doesn’t display some padding or margin changes). I’ve experimented with the margin and padding classes, plus css margins and padding, but it doesn’t make a difference. Also, I can’t resize with css, and found the only way to edit the size it to change the pixel height and width in the icon code. I’ve attached screenshots of the page from within cornerstone and also how it displays on the browser, so you can see the problem.

The files are exported from illustrator as SVG 1.1 files, and I’m just pasting the code into a RAW element, as wordpress won’t let me upload svg files. When I paste the code into the RAW container, Cornerstone hints that I should maybe use Custom JS on the frontend. However, I’m a guitar player, not a web designer, so I don’t know what to do there – I’ve learned a bit of very basic html and css, but that’s it!

If you take a look at this page, you will hopefully be able to find the problem:

http://www.juiceweddingband.com/x-weddings

It is a private page, so you will have to login to see it. I’ll put my login details in a private post.

Any help will be greatly appreciated! I don’t like asking to many questions on here, and try and figure as many things out as possible using the forum or other online resources. However, I’ve been trying to get these icons to display properly for two days now, so my patience is wearing a bit thin! lol

Cheers,

Rod

[juiceweddingbandParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Rod,

Thanks for writing in!

The spacing is generated by the <br> tags before the SVG (see: http://prntscr.com/8zdm6l). These tags are being generated by the line breaks in between these lines: http://prntscr.com/8zdmg5. So you can simply remove any code before the opening SVG tag and after the closing one (see: http://prntscr.com/8zdn4r). This should fix the issue you’re facing. 🙂

Hope this helps. 🙂

Thank you!

[juiceweddingbandParticipant]

Hi,

Thanks for your reply, that’s nearly fixed the problem! I took out all the code before the svg tag, and the top padding is now perfect! However, there still is extra padding below the icon, and I can’t see any other code to take out, as they are all closing with svg tags. (I have tried adding classes for no bottom margin, but this doesn’t make any difference) Any suggestions?

Also, is there a way of uploading svg files, and if so would this be better than pasting the code in to a raw element, or much the same? Would the svg file be easier to adjust with css?

Finally, in regards to the cornerstone suggestion about using custom js on the front end, is this something that could improve things for me, and (if so) could you recommend any resources?

Thanks again for your continued help!

Rod

[juiceweddingbandParticipant]

Hi,

Ignore the problem with the bottom padding! I put in a couple of new icons (without the extra header tags), and they aligned perfectly. I deleted the code of a couple of the existing icons, then pasted new code from illustrator and they are now working perfectly too! :0) There obviously must have been some line breaks left in somewhere from the old code??

Thanks again for your help, that’s great that I can get things working properly now! If you have any suggestions about the JS query and svg files that I mentioned above that would be much appreciated.

Cheers,

Rod

[JadeModerator]

Hi Rod,

SVG file type is by default not permitted in WordPress upload for security reasons. You can however enable it by adding some codes in the child theme’s functions.php. Please follow the link here: https://css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/

Hope this helps.

[juiceweddingbandParticipant]

That’s great, thanks for the tip!

Rod

[Prasant RaiModerator]

You’re most welcome! Let us know if we can be of any further assistance.

[Author]

Posts