On today’s episode, we talk about how to add images to our Word Press site with icon fonts. Right here on Your Website Engineer Podcast Episode No. 257. Welcome back to another episode of Your Website Engineer Podcast. My name is Dustin Hartser. And today, we are going to be talking about images and how to use icon fonts with our images. And we’ll get to what an icon font is in just a few minutes. Let’s go through the announcements, and then I’ve got a special plug-in that I want to tell you all about. So the first announcement is the Word Press webinar that’s happening this Friday.

It’s November 6 at 12:00 p.m. Eastern Standard Time. I believe that’s the correct way to say it. Daylight Savings Time is over. I don’t know. I don’t understand the whole time zone thing. But it’s 12:00 p.m. Eastern. And we’re going to be talking about how to restore a website from a back up. We talk about how important it is to have a back up and how to back up and how to back up and how to back up. And we should always be backing up. But we never really talk about what do we have to do in case we need to roll back from an older version. Maybe we messed something up or our site was hacked or whatever the case may be.

So we’re going to talk about it. We’re going to go through a couple of different plug-ins and how to actually restore a back up. And I’m going to try to lay it out as simple as possible, so you don’t have to hire somebody to restore that back up for you. And kind of just along the lines of a back up story, I was at the TBEX conference this past weekend, and I had an opportunity to help some folks out with their Word Press websites just live and on the spot. And some of them were self hosted sites. And this one site was running 3.7.11. And I really wanted to update to 4.3, but I wanted to make sure that she had a really good back up in place.

And so I got a back up. I got the backup up and running and it was good. And then I actually took that whole site and then moved it to my development server. I tested it. I clicked the button without any hesitation whatsoever. And it updated from 3.7 to 4.3 without any issues whatsoever. But I felt super comfortable doing that because I had a back up. And if anything really happened, I could just roll back to that previous version and get 3.7 back so that their website wasn’t messed up. And I could really spend some time digging in and troubleshooting what was going on. So that was just kind of a brief little story.

I just wanted to make sure that you are aware to always have a back up. And even if you don’t know how to restore it, then there will always be this webinar that you can come and check out later. If you are busy at that 12:00 p.m. Eastern Time, feel free to sign up at Yourwebsiteengineer.com/webinar. And you’ll get a full replay later in the day on Friday. I’ll email that out to you, and you’ll have access to that later. And then the other piece of news that’s happening in the Word Press space is Word Press 4.4 Beta 2 has been released. There wasn’t a lot in the change notes for what has been changed. It’s basically just the second version.

They fixed a lot of bugs kind of like what happens with different versions of Word Press. And 4.4 is scheduled to be out in about a month or so. So we’ll probably see, about every week for the next few weeks, I’ll be talking about the Beta 3, Beta 4, then release candidate and then we’ll finally get set for a Word Press 4.4 by the end of the year. So that’s really super exciting. I’m excited to see all of the new things that come with a new version of Word Press. It’s hard to believe that it’s been a few months already since we’ve gotten 4.3. And now, it’s almost time for another version.

But I guess that’s what happens when you get three releases per year on the Word Press cycle. So those are the announcements that I wanted to share with you today. I do have a plug-in that I want to share as well. And it is called Twine Social. And this is kind of a neat plug-in. It’s a newer plug-in, and it’s only got about 3,000 installs or so. But this allows you to show your social media post easily and beautifully all on one page. And so if you wanted to make a page with a special hash tag, you could say what the hash tag is, and then you can pull in feeds from Facebook and Twitter and Instagram and Linked In and Google Plus and all these different social networking platforms.

You can just go ahead and say the hash tag is TBEX. That was the conference that I was at, and the hash tab was TBEX. And you could go in, and you could pull all the streams from there. Or if you wanted to just showcase here’s my Twitter stream and what people were saying on Twitter, you could go ahead and do that. And you can get kind of a cool gallery view of what this actually looks like, whether it be like all of your Pinterest posts that are getting re-tweeted or your Instagram posts. Or you can make that page with all of the different social channels all in one. It looks really, really cool.

And this would be something definitely to check out if you are heavily into promoting just to your community on your social channels, whether that be the Facebooks, Pinterests, all of those different things. So it’s a plug-in that’s in the Word Press repository. I recommend checking it out if you’re interested in seeing how it can do it or what it can do and to see if it could actually work for you. So go ahead and check that out. And there will be a link in the show notes for Episode No. 257. Today, we are going to talk about icon fonts. And it’s really something that’s been kind of a small, little passion of mine that I’ve always wanted to learn more about it because I’ve been really bad at images.

I just struggled when it comes to finding those perfect images, whether they’re social media icons, or they’re just those little icons that maybe look like a microphone, maybe they look like a movie camera, maybe they look like a webinar logo. Whatever those are, I’ve always had a really hard time either making an image that I really like that works well with my themes, or actually creating that one on my own. And so it’s been kind of a challenge. And so it’s been something that I’ve really kind of customized myself to in learning more about icon fonts.

And they’re really, really cool. So let’s talk about them just a little bit. So images, they’re great. We love creating images. You can download icon sets online, PSD’s, and you can get them in 32 pixels, or you can get them in 64 pixels or whatever the case may be. But they’re kind of a pain when it comes to a website. They actually require extra HTTP requests. So for every image that you have on your website, that’s actually another request it has to load and makes your website just a little bit slower. They add a size to your page. Like every image has to be downloaded. They’ve got to be stored somewhere.

They don’t scale well either. So, if you’re on a mobile device or a retina device, those are different scaling, or the images have to be scaled for 2X in retina. And on regular computers, non retina, you have to have a version for that. So now, we have multiple versions. And it’s just kind of a pain. These icon fonts, on the other hand, just need one HTTP request for any size of icon. They look great on any size display, whether they are retina or non retina. And you can scale them, and you can customize them right on the fly, which is really, really cool. And now, Word Press themes are now using icon fonts.

Also, what are icon fonts, if you kind of need an image in your head of what an icon font is, if you go into your Word Press dashboard and look down the left hand side, when you are inside your dashboard, you see all of those little icons next to post, media pages, comments, appearance, plug-ins, all of those. Those are icon fonts, those little images that are to the left. They also appear sometimes at the top of specific pages. So if you go to the post section, the all post page, I guess that’s not there anymore. It used to be there was that icon right there as well. And sometimes, plug-ins will have these icons and whatnot. So that’s what we’re talking about.

We’re talking about these little kinds of generic icons that are used regularly. So that’s what an icon font is. And it, basically, means that you can add these. And it’s technically a font. It’s like the letter J. It’s the exact same type of text on a screen. And so what that means is you can actually style them with CSS, which is really cool. So you can scale them in size. You can make them bigger and smaller. And you can add some of your cool CSS3 animations to them. So if somebody hovers over your image, maybe it will spin. Or maybe it will zoom off the page. Or when you load the page, maybe it will do something crazy.

There are all these neat animations that you can do with CSS now. And now, you can do them with your “images” on your website. And it’s really hard to believe that where we’re going in technology, we used to only have text on a web page. And now, we’re going back to we’re going to have more text on a website. But the text is actually images, which is pretty cool. So a few other things that you can do with these icon fonts, like I said, you can change the color to whatever you want. You can easily add shadows. This is really cool. You can make shadows for your images just with a click of a button or, actually, with a little bit of CSS code.

You can add strokes or gradients or textures. So you can do all of that just on the fly kind of. I’m saying on the fly, and what I mean by that is you just go in, and you edit your code a little bit, or you change what your short code is being generated. And then it just starts working. You don’t have to actually take that file, open it up in Photo Shop, scale it to the right size, and then add your line images around it or make it a different color or anything like that. You can do what’s called take advantage of a transparent knock out.
So if you wanted to, you could have these icon fonts that you wanted, the Facebook and Twitter icon, but you wanted them inside of a circle, so you could actually say that you wanted a circle that are the right blue colors for Facebook and Twitter. And then you wanted the icon font be the opposite or the reverse. So it would be a white logo inside of there, which would be really, really cool. It also takes advantage of cross browser support. You can also do standard effects, which means you can have the opacity set at different levels. You can rotate these images from straight up and down to sideways, whatever the case may be.

And of course, like I said earlier, you can increase the site speed and reduce the amount of assets that need to be loaded right when somebody is loading your website. And they look super cool. There are a lot of really cool icon fonts that are out there. There are a few places to find them if you’re interested in actually looking at icon fonts. The first one is called Ico Moon. And there will be links in the show notes for these as well. Font Awesome is another one. Foundation Icon Fonts II. And Fontello is another one. Fontastic and Pictose. And these are all ways that you can kind of expand your library of these icon fonts and just kind of learn more about them and see what all kinds of options are.

Like I said, they are built in with Word Press. They’re already built in there, so you don’t really have to do anything. Sometimes, I normally have to go over to I use Font Awesome, and I go in there, and I find what code I need to put exactly where I want it on my website. And then I can go ahead, and I just kind of use their documentation to know how to pull it up in Word Press. But today, what I want to talk about just a little bit is about this plug-in called WPSVG Icons. And this plug-in – and the SVG stands for scalable vector graphics. And these are great ways to actually create images for the web, or what’s called in these SVG icons, so it’s like an extension.

So we’ve got PNG and we’ve got JPEG. We’ve got GIFS. And we also have one that’s called SVG. SVG is a little harder to build, but you can do that in the Adobe suites. And then you can export it as actually code instead of an actual image file. And then you can do the same thing with that type of code. You can actually go in and do custom CSS to different things. So maybe you draw out a big circle. And you just have a small, little line in the circle. And then you have your other icon in there, whether it be your custom logo or something along those lines. And you can make that all an icon font.

And then you can customize it and style it as easy as you would anything else with CSS, which is really cool. So the WPSVG icon is what we’re going to look at today. And this is a plug-in that you can get started with it for free. There’s a lot of limitations to the free plug-in, but you can also upgrade to the premium version. And I’m really close to actually just going ahead and upgrading. And just because of the fact that it is really, really cool, and the license starts at $29.00 for one site. So it’s not that expensive. If you want five sites, it is $69.00. And you can go up to 10 sites for the developer license for $139.00.

Let’s talk about what this plug-in can do right outside of the box. So what you can do is, once you install the plug-in, it’s free on the Word Press repository. You can go in, and it adds an extra little button next to the add media button in your Word Press dashboard. So it’s as simple as maybe you wanted to show an icon. Maybe you wanted to have a bulleted list, but you want the bullets to be a special icon or whatever that looks like. You can go ahead and click that add icon button. You can wrap it in different tags if you want to, whether you want to wrap it in a DIV tag or a SPAN tag, H1, 2, or 3 tags, whatever you like.

And then what you do is you go ahead, and you can just click on the image that you want. Maybe you want a little picture of a cell phone for some reason. And then you click insert icon, and it goes ahead, and it adds all of the short code stuff that you need just boom, right there. And now, all of a sudden, we’ve got an image on our page that looks like a cell phone, which is really pretty simple. It’s really kind of neat what it can do. Now, this is about the only thing that this free version of the plug-in can do. It can generate these short codes for you. And it can display the images for you.

Now, if you download the free version, you can always upgrade right through the Word Press dashboard. But some of the features that I really like that I’m really interested in exploring for this plug-in is it gives you the ability to – here’s what the premium version gives you. It gives you the ability to have unlimited custom icons. And so with the free version, you can only have 10 custom icons that you either design yourself or you download an extension pack, and you can add up to 10. There’s unlimited in this new version or the upgraded version. You can also customize this, which is really, really cool.

This is powerful because, in the icon customizer, what you can do is it gives you advanced setting where you can say that you want the icon to be 20 pixels in height. Or you want it to be 40 pixels in height. Maybe you want to say that I want to have this image, this icon, be a link to somewhere. And you can have a button to say open this in a new tab, and then you can put a URL in there. You can give it a specific class. So you can style it, and you can colorize it if you want. And you can select the icon color all within the same icon picker when you’re in the Word Press dashboard when you’re adding a new post or page or something along those lines.

Another thing that you can do is you can actually it’s called icon containers. And these are containers that will allow you to easily just customize a bucket of icons. So maybe you want seven icons, and you want them to all have the same state or all have the same type of look and feel. So you can say I want all of the icons to be red. And I want all of the hover states to be blue. And I want them to spin a little bit when somebody hovers over them or whatever that looks like. You can customize them until your heart is content with these icon containers. The CSS animations are wicked cool. You have the ability to say that maybe you want it to wobble.

So maybe the image rotates back and forth just a little bit when somebody hovers over it or the page loads. Maybe you want it to scroll up from the bottom when the page loads, whatever that case may be. You have the ability to do all of that with the premium version as well. And then probably the biggest deal, the one that I thought would be in the free version, but it’s not, but this is called the menu icons. And so you can add these icon fonts to the menu items itself. And I don’t know if you’ve ever tried to do this before. I think I did a show on this a few years ago or a while back on how to add images next to a blog or next to contact us or next to technology, whatever those menu titles are, your home page.

And it’s really, really hard to do that. Now, with this WPSVG Icons plug-in, you can go ahead, and you can just go ahead, and it adds another section to your menus area. And then you can say oh, I want to use this cart button for my cart page. And I want to use this blog image for my blog page. It’s really, really cool. And I think it’s definitely worth $29.00, so you don’t have to learn and figure out how to actually get these icon fonts exactly where you want them. Now, you can do all of this stuff with a little bit of code and just spending a little bit of time learning how to do this.

Or another option that there is out there is there’s actually a couple of different plug-ins that you could use in conjunction with this or by itself. So there’s one called Font Awesome for Menus. And this has the ability to use any of the icon sets that are on Font Awesome. And you can use that to build icons into your menus. So that’s one option. So if you’re interested in just adding the menu feature, and you don’t want any of the other premium features of the WPSVG plug-in, then you can do that. Or another one that’s out there is called Font Awesome Short Codes for Word Press. And this gives you the ability to kind of do the same thing.

But you have a little bit more functionality and a little bit more flexibility than what you could with the SVG plug-in. So, that one is called Font Awesome Short Codes for Word Press. And so those will be in the show notes as well. I’m super excited to use this. And I saw one of the videos for the WPSVG plug-in. And it showed how you could create an image that, when somebody hovered over it, maybe is spun, maybe it did something. And I’m like wow, this is really, really cool. So I’m going to do some experimenting and playing with it to see how robust this thing is and to see how well I can actually just make those little, subtle things that much nicer on my website.

So that’s something that I’ll be playing with in the near future. So that’s what I wanted to really kind of focus and share today. Whenever you have an opportunity to use an SVG or an icon font in replacement of an image on your website, whether they be your social media logos, maybe you can even turn your logo into an icon font, whenever you can use this technology, it’s going to work so much better. It’s going to just look so much nicer on your screen whatever size device of somebody is looking at your website. It’s just going to do some really nice things. And it’s going to look amazing. And you can style it.

You can change the colors. You can do some really cool things. Just think if you wanted to turn your website into a Christmas themed website, and you’ve got it all set up, and all you have to do is change a couple of items in CSS, and you can change all of your fonts from a normal black to a green or a red. Change them for fall. Change them for different seasons. You can do some really cool things. Not that that would be something that you’d really want to do, but I can see some really cool use cases like maybe if next to my buy now button I put a cart. Can I sell more? Can I do an AB test?

Will more people buy if there’s a cart next to it or if there’s maybe, what else could there be next to it besides a cart? Maybe there’s like a shopping list or whatever that looks like. So you can easily swap in and out fonts very, very easily. If you wanted to change which icon you’re using for Twitter, maybe you want the Twitter T versus the Twitter bird like the little bird icon, you could swap those out really, really easy. And it’s really pretty cool. So I would recommend checking out the free version of WPSVG Icons just to learn how those icons work and how you can implement those on your website and start using them.

And that’s what I’m going to do. I was trying to figure out a topic for this show. And I was like we haven’t talked about icon fonts or maybe I never have. And I’m just really excited now about diving in and learning more about these WPSVG plug-in and to learn more about them and really customize the look and feel of my website. So that’s going to wrap up this episode. And let’s start the music, and let’s get out of here. So that’s what I wanted to share. They’re going to help your website load faster, and it’s going to take up less resources on your server for sure if you don’t have all of those image files there.

But the main thing I wanted to let you know about is don’t forget about the webinar that’s happening on Friday. It’s just a couple of days from now. You can register at Your Website Engineer.com/webinar. And we’ll talk about backups. That’s all I’ve got for you this week. Take care. Bye.