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

Working with Basic Latin encoding

From: Deploying Icon Fonts for the Web

Video: Working with Basic Latin encoding

In this chapter we're going to take a look at some of your options and possible I like copying and pasting.

Working with Basic Latin encoding

In this chapter we're going to take a look at some of your options and possible strategies for deploying icon fonts based on factors such as how the icon font was encoded. We're going to start with basic latin encoding, and so what basic latin encoding is is taking the normal character in a font, like l or a, taking that particular Unicode value and replacing it with an icon. Or building a font where you have icons in the place of where those characters would normally be. Just to show you an example of one of these here is the font that we are going to be using in this exercise.

So you can see we've got symbols mapped all the way from a to z we're only doing lower case here. A lot of people like this approach because they do things like c for calendar and d for document, e for edit and it becomes really easy for them to remember which icon they need to use by just using the letter. Of course, then you come to things like mail where m was already taken up by menu, so where do you put that? You run into some problems with that type of logic but there are a lot of older icon fonts out there that use basic Latin encoding.

Most of the icon fonts that are being created now use private use area or sort of reserved symbol encoding characters. But there are still some out there being built this way and there are certainly some older ones that are being built this way. So if you get one of those and you want to use them, how do we use them? Okay, so I have the Latin.htm file this is found in the 03_01 directory. This is the same file we were just looking at in our browser. If I scroll down I can see at the very bottom of the page down here I have a heading that says Using Basic Latin encoding, display the home icon and display the calendar icon.

So we know and looking at the font that the home icon is at h and the calendar icon is at c. So that's all we really need to display them. So going back into my code, I'm going to go to the home icon just type in an h, and then I'm going to go to the display the calendar icon, and I'm going to type in a c. I'll save that. Of course, if I were to look at this in the browser, you can see that there is an h and there's a c, but my icons aren't showing up. That's, of course, because I haven't actually told them to use the right font.

And the problem with this, obviously, is that they're in the middle of a paragraph. So, what I'm going to do is I'm going to go back and I'm going to wrap them in a span tag. So I'm go ahead and create a span tag. Yeah and let's just move the h over there. You think by now I would know how to do this a little better. All right, so span, and I'm just going to give this a class of icon. I like copying and pasting. So I'm going to copy and paste this down here. And I will replace h with a c that was much easier. So now by creating a generic class called icon, I'm surrounding these characters and I'm telling them, okay these are going to be icons now.

If I save this, go back out to the browser, no change whatsoever, well that's understandable because we haven't done anything yet. So I'm going to switch over to the CSS file, I'm going to scroll all the way down to the bottom. And rather than, force you to watch me type this, I'm going to paste in some code here. You can pause your video and type in the way that I've got here. But I'm going to explain what all of this stuff is doing. So I have a class selector called icon. And that of course is going to target the span tags that we just wrote in the HTML. We're assigning the font family of chunky_latin because up in the, here we are up here.

You can see the font face declaration is assigning a font name chunky_latin to it, meaning, the same font we've been using, just encoded in Latin characters. So chunky_latin. Font weight of 400. So after all this stuff, this is all the normalized styles that we were doing in the resolution controlling styles that we were doing earlier. And then I've got some discreet styling here. Font size, displayed as a block level character in line height, it's going to control how it displays. That doesn't have anything to do with the technique we're doing, just that it's going to make it look a little better hopefully.

So I'll save this. Let's go back in and test this in the browser. And sure enough as you can see, our home icon and our calendar icon are showing up. And all that was required is that we make sure that the browser knows that those letters should be displayed using that font. You know that is pretty easy. It's relatively effective, but I want to point out that it's really not the best solution for deploying icon fonts. You've got some accessibility concerns here because screen readers would read those letters regardless of what font they're displaying in. And if this icon font fails those icons are going to fall back to regular characters and that's going to look a little weird.

So in our next exercise I'm going to show you guys how to use generated content to deal with some of those issues.

Show transcript

This video is part of

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

21 video lessons · 1817 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 preferencesfrom 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.