Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,987 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
One of the most difficult aspects of working with icon fonts, is getting the icons vertically aligned with other elements, like text. This is largely due to how icon fonts are created. Remember, they're fonts. So, each icon has to be drawn inside,in in the individual glyphs. Em box. Now an Em box is essentially a box that defines the width and the height of the character. And there are other measurements inside of it as well. Like ascenders and descenders and baselines.
And essentially, when a letter is drawn inside of that Em box, it defines where it sits along the baseline, how far up it goes, that sort of thing. So when an icon is drawn, or positioned inside of it, it's really up to the designer to determine exactly how big it's going to be within that Em box. And where it sits in relation to things like the baseline. You know, some icons are placed directly on the baseline. Some fill up the entire inbox. It's really up to the designer. So when you use an icon font, you're not really 100% sure the first time you use it, how the icon is going to sit in relation with the text next to it.
So there have been a few techniques that have evolved in order to control the vertical alignment of icon fonts. But probably the main one I see being used is the vertical alignment property. Now, a lot of designers don't really totally understand what this does, but they use it to control icon fonts, and sometimes the behavior isn't quite Quite what they expect. So I want to do two things in this exercise. One, I want to go over the vertical align property, kind of what it does, and illustrate that for you. So in a large way, this is more of a dim mode than it is an actual exercise file.
Then I'm going to show you a technique that I really like. And it's a great technique, because it works both for inline elements and block level elements when you're trying to align them. So, it's definitely a technique that you want to pay attention to. Okay, so I have the 'vertical dash align dot htm' file open in browser and you can find this in the 04 underscore 02 directory and if I scroll down a little bit, you can see I've got several examples on the page. And all of these, except for the very last one, have to do with using the vertical align property.
The vertical align property has several possible values. There are some of them that you can see right here. Baseline, middle, top, text top. Bottom, text bottom, and a percentage value. There are actually more than that. There's like super and sub, but they're not used that often with icon fonts and they probably wouldn't give you the result you were expecting so I've kind of left those out because they're not really domain to the technique we're looking at. Okay, I'm going to go back into my code editor here. Again if I scroll down. You can kind of see what we've got going on here.
We've got some paragraphs with the spans inside of it. Now, it's really important that you understand the relationship between the paragraph text and the icon. The paragraph is the parent element, and then the span tag that has the, the icon inside it as generated content, is a child tag of that paragraph. Alright, I'm going to switch over to the CSS and scroll down. There are a couple things I want to point out, in terms of Of what's happening here. So for the paragraph inside the section, which is the exercise file portion of it, I've increased the size of the paragraph a little bit.
So that the so you can, you know, sort of see the example a little bit better. Also I've applied a background to the paragraphs. That's that light blue color that you were seeing. So, that way you can understand where the boundaries of the paragraph are relative to the boundary of the icon. Now in the icon font styles, I also want to point out here that I have applied a background of yellow. To the icons. So again you can sort of see what their boundaries are and I've also given them a line height of one. Now if we go back and look at this before we start actually using the vertical align property, you can see, you know, without these backgrounds it looks as if the icon is a little bit below.
The baseline, but in reality it's kind of sort of centered on the text. Not quite but sort of centered on it. A lot of this has to do with the fact or the way that this particular icon was drawn. I know because I drew it. The way that I drew it was I took the icon And I put the baseline at about 25% from the bottom of it. So if you look at the baseline of the text, then you sort of ran a, a line straight through here, you're right at about 25%. So I'm actually getting exactly the behavior that I would expect from these icons.
But if you were not the person that created the font, You might expect these icons to be up a little higher or maybe even down a little lower. I'm, I'm not really sure. So I'm going to go back into my CSS and I'm going to un-comment out a series of rules that I've got down below this. Okay, so each one of these has a class applied to them, and the class relates to the property that's being applied. So. Vertical-align baseline, middle, top, text-top, bottom, text-top and then we have a percentage. Okay. So I'm going to save this, we'll go back out to the browser and now, we can see a definite change and a define difference in how the text is being aligned.
Now we don't really see too much change with the first one and the reason for that is that baseline is actually the default, so if you don't set vertical align. You're going to get baseline. What baseline does is it takes the child element and it aligns the baseline of that to the baseline of the text which is exactly what's happening here. Now, vertical align middle is similar, but what it does is it takes the middle of the element, and aligns that with the middle of the lower case letters in the parent element. So if we were to take, for example, this E And draw a line dead in the middle of it, you would notice that the icon is aligned exactly to the middle of that.
Vertical align top, the top of the innermost element is then aligned to the top of the parent element and you can see that's exactly what's happening here. The icon is being moved all the way up to the top. Now. Because of the fact that the artwork doesn't extend to the edge of the boundary sometimes it doesn't look like that's actually happening. If I didn't have a background applied, for example, the top of the circle would not be touching the top of the paragraph. So it's one of those things that you have to sort of understand that the glif doesn't always fill up. It's entire boundary.
Now text top confuses a lot of people because they'll apply text top and then the icon will go down and that really confuses the heck out of them. What's happening here is the top of the icon is aligning with the top of the text. So that's why the, the top of that yellow square is aligned to the top of the v. In some cases, based upon where the icon is positioned, that's actually going to move it down. Vertical align bottom is very much like vertical align top, only, of course, bottom is aligned to the bottom. Vertical align text bottom does pretty much the same thing. Now it doesn't align the bottom to the baseline.
What it's doing is, you'll notice we have a descender here on the G, and it's aligning to the bottom of that. Now when we do percentage values, that percentage is basically a percent of the line-height value. So if I wanted to move it up, let me go back into my CSS, I could just increase this value, say 15%. And you can see it's moving it up. If I use a negative value you can see it's moved it down. Now you have to be kind of careful with this because if you increase or decrease that value too much you can actually change the parents line box. Let me show you what I mean. Let's say this to say, oh I don't 95% negative 95% save that in the go.
Notice that it is pushing It's pushing way down but it's taking the line box with it. That could play havoc if this were a multiline paragraph. So you need to be very, very careful in relation to using percentages. Small percentages tend to have actually a really big effect. So I got a 10% alignment. Now, it says, moving in all, almost all the way up to the top. Alright so 5% gives me a nice sort of vertical aligned icon. Now I mentioned I was going to talk about a different way of vertically aligning icons.
Because the vertical align property works really well. But it only works in 2 instances. One is inside of table cells. The second is when you're dealing with inline elements. And of course we're dealing with inline elements here because we have a span inside of a paragraph. But what if your icon is not an inline element, or what if you want a little bit more control over it. Well to do that you can just use some box model properties. So on the very last one, very last span I have a class of other. So what I'm going to do here is, I'm going to set the display property to inline-block.
Now, that means that it's still going to be inline in terms of aligning to the text. It's not going to break on its own line. But because it's inline-block, I can now apply block-level properties to it. The next thing I'm going to do is, I'm going to give it a position. Of relative, now whats really great about relative positioning, I really think this is one of the most under used things in CSS. Is that it doesn't disrupt normal document flow the way say absolute positioning does. To the page that element is exactly where it's suppose to be but then you're allowed to do offsets.
So, I'm going to come in here and set the top value. Now, I want to point something out that I forgot to mention when you're doing the vertical line percentage. Percent is the only value you can use. You can't use Ems, you can't use a relative unit measurement, a fixed unit measurement. You have to use percentages. When you're doing an offset like we're going to do here with the top property, I can use anything that I want. So for example, I could say something like negative 0.2 m's, now that's going to pretty substantial. So, if I save this and I go out you can see that's moved the icon way up.
So I can actually go incremental with this and go 0.5 m's, save that. And you can see, I've just nudged it up just a little bit. So that's the thing I love about using relative positioning in terms of vertically aligning these icons. Negative margins will pull an item up, but you have to be very, very careful when you're using negative margins or positive margins to align elements, because elements can collapse, and it can cause all sorts of weird issues with your layout. Using relative positioning doesn't affect anybody else.
And just offsets the element that your working with. So I love that technique, and I think it's a, it's a great technique to work with. Now one of the things that I want to point out to you guys is that every single icon font is different. And even within every icon font, the icons inside of it can be different. So the chances of you being able to write a single selector that's going to handle the vertical alignment for all of your icons in the font Is pretty slim. So you definitely want to have multiple techniques that you can turn to when you have to work with vertical alignment because some icons might need a little bit more help then others.
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
- Finding icon fonts
- Ensuring consistent styling
- Exploring class-based solutions for deployment
- Deploying with the data-icon attribute
- Aligning icons
- Animating icons
- Styling multicolored glyphs