Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Vertically aligning icons

From: Deploying Icon Fonts for the Web

Video: Vertically aligning icons

One of the most difficult aspects of working with icon fonts, Now when we do percentage values, that percentage And you can see it's moving it up.

Vertically aligning icons

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.

Show transcript

This video is part of

Image for Deploying Icon Fonts for the Web
Deploying Icon Fonts for the Web

21 video lessons · 1879 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Deploying Icon Fonts for the Web.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.