Placing SVG icons into my site using Upfront

Hello! So I'm designing elements (specifically icons and buttons) for my website using Illustrator, and would just like to know IF or HOW I can place these into a page using Upfront...

  • Adam Czajczyk

    Hello Alex,

    I hope you're well today and thank you for your question!

    You can place SVG elements on site layout (in fact we are using them to in some Upfront starter themes) but you'd need to use CSS for that as there's no native support for SVG in WordPress.

    The way to do this is similar for Upfront Editor (when you are editing your site's layout using default Upfront front-end editor) and for Upfront Builder (a plugin to build themes from scratch) and in general it would go like this:

    1.
    - in case of Upfront Editor: upload your SVG file to Media Library and note down its URL
    - in case of Upfront Builder: upload your file to the server to the assets folder of the theme that you are building;

    2. Drag some element like button on your layout
    3. Create a preset for that element
    4. Use CSS to add your image as a background of that element or as css :before or :after

    You would also most likely need to add some more CSS rules to change the default look of that element that you used but that depends on that element.

    If you could point me to any particular element on your site, upload your SVG image and tell me what would you like to achieve there, I could take a look and give you a working example for your site so you could than proceed with other elements based on this.

    Best regards,
    Adam

  • Alex

    So I have some makeshift elements on the page labeled 'Home'.. in the second section there are 3 icons placed in 3 picture boxes, with 3 corresponding buttons that are directly under them. The icons I have up now are PNGs, but I uploaded an SVG of the one in the middle (button titled JOINT PAIN)

    That SVG is Linked, which i believe is it's URL??? If that SVG does not work however, there's a ton of export and attribute setting in Illustrator that I'm just learning about and just might need to change. I say this because I tried to generate the CSS in Illustrator but I was not able to.
    Sounds like I'm going to need that though.

    Let's say I had the CSS (because Ill figure it out eventually) I will then need to not only upload the SVG in the Media Gallery, but go into Edit Preset CSS in the settings of that specific element and paste the CSS into the window where code can be placed??
    I see other options like Link Image there too. What is that used for??
    Haha sorry if I'm making this messy! I'm like a baby just learning to walk here..
    Your help is so very much appreciated though Adam.
    So Thanks Again,
    Max (Alex is my Brother)

  • Adam Czajczyk

    Hello Max!

    So I have some makeshift elements on the page labeled 'Home'.. in the second section there are 3 icons placed in 3 picture boxes, with 3 corresponding buttons that are directly under them. The icons I have up now are PNGs, but I uploaded an SVG of the one in the middle (button titled JOINT PAIN)

    That SVG is Linked, which i believe is it's URL??? If that SVG does not work however, there's a ton of export and attribute setting in Illustrator that I'm just learning about and just might need to change. I say this because I tried to generate the CSS in Illustrator but I was not able to.

    I believe Illustration won't give you a CSS that would be useful with Upfront as Upfront is quite specific. You are however right about creating a preset for an element, editing it and pasting CSS there.

    I took a look at the site and see the icons that you are referring to so let me give you an example of what I would go for in that case to use SVG. Let's say that you created an SVG icon already for "Joint Pain". I'll just use some SVG icon from the net (might not be allowed for use by licence so it's only for demo purpose and please do not use it anywhere!).

    1. Your current icon is an "Image" module, filled with a PNG image; remove it :slight_smile:

    2. Drag and drop "Button" module in that place

    3. Go to "Settings" for that element (by clicking on a gray "gear" icon on top of it)

    4. create a preset and give it a unique name

    5. "Edit CSS" for that preset and put a code like this inside:

    .jointbutton {
    	background:url('https://www.currae.com/wp-content/themes/currae/images/specialty/Arthroscopy_a.svg') center center no-repeat;
    	background-size:contain;
    }
    .jointbutton a {
            /* make button link background transparent */
    	background-color:rgba(0,0,0,0);
            /* make button text transparent */
    	color:rgba(0,0,0,0);
    	display:block;
    	width:100%;
    	height:100%;
    	margin:0;
    	padding:0;
    }

    There are two things that you need to change in that code:

    - ".jointbutton" selector: I named my preset "jointbutton" and the class name that was automatically created was "jointbutton"; if you name your preset e.g. "MyJointIcon" you will want to replace ".jointbutton" in above code with ".MyJointIcon"

    - an URL of an SVG icon; I used some random knee image from Google so here you put an URL of an icon that you uploaded to the Media Library.

    At this point you would get an SVG icon on site and it would even be fully clickable :slight_smile:

    You can point it to any URL you wish (may it be another page/post of your site or an external site) by clicking on "Link" ( a "chain" icon) icon for the element and setting it there.

    I see other options like Link Image there too. What is that used for??

    I'm not sure which exact part of the site/Upfront you are referring to. Could you point me to the place?

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.