Build Your Own Business Website header image

How to Add an Icon to a Link

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - , ,

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.

In this session, we demonstrate how to add an icon to a link. First we assign a class to a text link, then add a background image that is appropriate for the link. We finish by styling it with CSS to make it look like an icon.

Video Transcript

Now what I want to do is make this into something interesting to look at rather than looking like this. And so what we’re going to do is we’re going to assign a class to this type of link and then we’ll put a little background image in it so that it’s clear that this is an audio. And we will make the text larger and make it stand out more and all the rest of that stuff.

And so we’re going to do that right here. Here’s our link, right? So we’ll start off with a and in front of the href, we’ll just say class = audio. So now we’ve assigned a class to this and if we hit update, we’ll come over and grab this URL and look at it here in Firefox so we can look at styling it. And actually, I should just go ahead and open up Filezilla while I’m here. I know we say that this is generally not a code, that we don’t do code in this Thursday morning session. But I think everybody here is capable of keeping up with the code so it’s easy code. So we’re just going to stick with it here for a little while longer.

Okay and let’s see, custom CSS, 11 2, 11 2, 86 47… looks like we have a… yeah, so we’ll go ahead and download this. Make sure we’re using the latest version of the file. And then I have an image that I have saved that I want to upload to this site here real quickly. I have a little audio image and I want to talk about, for a moment, where you get these kinds of images. I got this image from findicons.com and this is the image that I’m using to place before that audio link. And so you’ll have this little image and then you’ll have the audio link, the link beside it and that should indicate to anybody that this is something to… you know, this i something more than just a page link.

Now so findicons.com has this kind of stuff where you can simply search. So if I want to search for speaker or you know, you can see how these different icons here for speakers. Or maybe I want to say music. Okay so I’ve got all these different music symbols you know, that I could choose from. And if I wanted to do say, this music symbol here you know, I can choose whether or not I want it as a png or as an icon file or as something else. And if choose png, it just downloads directly to my computer right there, that image. And so this is a free icon service.

Another choice is Smashing Magazine. Smashing Magazine has just a huge amount of free things that you can use and so if you… look at this funny menu though. If you go over to freebies, you can see all the different things that they offer for free including, for example, icons. Now, they’ve got a… let’s see, they’ve got these 3 different icon sets that you can go take a look at you know, with all kinds of different potential icons that you can choose from. And all these are free and you can use them as you see fit. I think they probably prevent you from redistributing them but besides that, these are icons that you can use at your you know, on your site the way you feel like they should be used. And so there are a lot of different choices here for free icons and those can add a lot of interest to your site. So something to consider, these are the 2 sources that I use, findicons.com and these hot 50… or Smashing Magazine’s free icons.

And the icons I use on my site, I actually purchased from Dreamstime Images. But these are good sources of free icons. And anyway, I have this… the free icon that I ended up choosing was that little bubble with the music symbol in it there. So what we’re going to do is upload that to the site first. So I’m going to add new… let’s see, where’s the add new media? That’s where it is. Select the file and then let’s see, I think I stored this on the server under tutorial graphics. And audio notification png is the name of that one. Okay so there it is, it’s 30 pixels wide by 24 pixels tall.

So we’ll copy that and then we’ll come back over here to this and we’ll inspect the element and now, you can see that this has a class of audio. So in our custom CSS file, if we just come down here to the bottom for a moment, say… oh actually, all we really have to do is say k. audio and that’s for the link with a class of audio. So we’ll say background image: URL then paste the URL. Okay and you can see now it’s repeated itself across the whole thing, right? And so we need to tell it not to repeat, background repeat: no repeat. You know what? It must be no repeat. There you go. So now we’ve got… it says not repeating.

Now we need to move this over to the side a bit so we’ll give ourselves 35 pixels of padding… padding left: 35 px. And you know, I think we want to make the font size larger so font size colon… let’s call it 18 px. Okay actually, it almost makes sense even to make it maybe… well, let’s try 24, see what happens here. Listen to the Step 3 audio… well, let’s just make it 20 and that was sort of a… and actually, I think that looks fine. We could drop this down a little bit if we wanted to so that it was centered but I think, actually having to shadow line up with the underline is probably a great idea. And although let’s just go ahead and move it down anyway. Let’s give it… so we call it a background position: 0 – 3 px. Okay actually, not minus but 3. So 3 pushes it down, maybe even 5 actually. Let’s see what happens with 5. Okay 5 eliminates the shadow so we could give this a padding bottom of 5 px. And maybe we want to just make that 40, now that we’ve made everything so big so it pulls off to the side. Actually, that looks great just like that.

So what we have is the style, a link with a class of audio and we’ve given it a background image that’s not repeating. We’ve pulled it down just a little bit so that it lines up sort of centered… the bulk of the image is centered on the text itself. We made the font style bigger so it shows and you know… I don’t know. I think maybe we should just give this a little margin too, margin to the left so we move the whole thing over a bit so it’s indented a bit. So margin left: 20 px, there we go. Actually, I like that. It looks perfect.

So then we just copy this and open up our CSS file. Let’s see, CSS, source files, content, themes, thesis_181, custom, custom css. And then let’s see, we’ll just put this in the content area. Yeah so we’ll just come down here, we’ll paste that. So now, everything with a link, every link with a class of audio is going to look like this. And so then we’ll just upload that back to the site and then we’ll come back over here to the site itself and refresh it and there we go.

Now we have this lesson, “Listen to our Step 3 audio.” And it brings that up. Okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment