Build Your Own Business Website header image

J Shortcodes Plugin – Part 5 Adding Custom Icons to Buttons

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is Part 5 of the J Shortcodes Plugin Series and here we show how to add a custom icon to a button and specify its size and color using J Shortcodes.

Video Transcript

So the next thing we’re going to do then is we’re going to add custom icons to this. Rather than using one of their own icons, we’re going to go ahead and use an icon that we have created for the purpose.

And so, the first thing we need to do is go to our Media Library and add the icon to the library. So I’m going to select files and we go find… let’s see, content, themes, thesis_182, custom images. Okay so let’s see, I could….yeah, for example, we could… let’s see, how big is this icon here? It’s 40 by 40.

So let’s go ahead and just use that one. Let’s pick up the 40 by 40 icon here and come back over to our page. Actually, we’ll go the shortcodes. We got a little bit of suggested information in here. For example, they suggested that double extra large shortcode or icon should only be 36 by 36. We’ll go ahead and try 40 by 40 anyway just to see what happens. And what we’ll do is we’ll pretend we have button called “Listen to our mp3” or yeah… “Listen to our presentation.” So we’ll say white size extra extra large. This is going to say, “Listen to our presentation” and then in terms of our icon, this is where we just put our URL instead of the name of icon. So we’ll come over here, grab that URL for that and then inside of this icon section, we’ll just go ahead and put the… update and then refresh it. So now, we have a little button that says “Listen to the presentation” yeah, which downloads our PDF of course, instead of listening to a presentation.

If we want it to… what would happen to this if we made it smaller? So instead of double extra large, let’s say it’s just large or extra large. If we update that and refresh it, that’s not entirely bad. And if we want a little bit more space there, we could actually give ourselves a little bit more space here simply by adding a space right there. I think that would work. No, it didn’t.

Okay so we have… and we could just you know, follow their guidelines. And so, their guideline for a extra large is 28 by 28. So what I could do here instead then is I could edit the image and then scale it to 28…scale and then I think it’s saved. Save all changes, let’s edit this again and copy that. And then all we do is come back to this icon and change that icon name to our updated icon. Refresh it and then we’ve got our little 28 pixel thing working just fine.

And if you use transparent pings like I did for these images you know, if you change the color, it’s still going to work. So for example, if you change the color here to blue and hit update and refresh it you know, it’s still going to show up there although not particularly well. Take it back to white.

0 Comments… add one
0 comments… add one

Leave a Comment