Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
学位
证书

浏览 Coursera 的全部课程

浏览
搜索
企业版
登录
免费加入

Exercise (Video): Icon Fonts

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

香港科技大学

4.8（1,986 个评分） | 44K 名学生已注册

课程 1（共 4 门，Full-Stack Web Development with React 专项课程）

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

查看授课大纲

您将学习的技能

Bootstrap (Front-End Framework), Node.Js, Jquery, SASS (Stylesheet Language)

审阅

4.8（1,986 个评分）

5 stars
1,643 ratings
4 stars
288 ratings
3 stars
38 ratings
2 stars
9 ratings
1 star
8 ratings

AA

Jul 12, 2018

One of the best courses I have ever taken. Everything is explained in the best way possible. The Instructor is also good. Must give this course a try. It enhanced my knowledge of the subject matter.

AM

Jul 02, 2017

This is a really nice and helpful course which takes you through the basics of Bootstrap 4 and responsive web development on a high level. Creates a good platform for further knowledge enhancement.

从本节课中

Bootstrap CSS Components

This module concentrates on Bootstrap's components that are designed using pure CSS classes. You will learn about Navigation and Navigation bar. Then, you will learn about buttons, forms, tables, cards, images and media, tags, alerts and progress bars. At the end of this module you need to complete your second assignment.

Navigation and Navigation Bar9:16

Exercise (Video): Navbar and Breadcrumbs30:47

Exercise (Video): Icon Fonts12:21

教学方

Jogesh K. Muppala
Associate Professor

脚本

Let's now move on to our next exercise,

where we will learn more about Icon fonts.

We will download Font Awesome,

and then include it in our website design.

And also we will download bootstrap social and

design some social patents to be included in the pitch.

To get started, go to the confusion folder in your terminal window,

and we will use npm to go and fetch Font Awesome for us.

So at the prompt, type npm install font-awesome minus minus save.

So this will fetch Font Awesome into our nobody folder.

And at the same time, it'll add Font Awesome to our package.json file as a dependency.

Once Font Awesome is fetched,

then we can go ahead to make use of it in our website.

The next step is to fetch the bootstrap social and install it into our project.

So to do that, at the prompt type npm

install bootstrap-social@5.1.1

minus minus save.

And this will fetch bootstrap social and install it into our project.

Now, we need to use this font five,

it's the Font Awesome, and the bootstrap social in our website.

So going to index.html right at the top,

just before the style.css file,

I'm going to import both Font Awesome and bootstrap social.

So right there, let's type in link

rel stylesheet href

node_modules/font-awesome/css/font-awesome.main.css So let's

import that into our index.html file similarly,

given import the bootstrap social.

So node_modules/bootstrap-social/bootsrap-social.css.

So these two we will include into our index.html.

Similarly, I need to include both these into my aboutus.html So let me copy that and move

over to aboutus.html and then paste that into the aboutus.html also.

Now, getting back to index.html we are not going to make use of the Font Awesome icons,

and also the bootstrap social icons in our index.html page.

Going to that navigation bar in the index.html page,

right in this link for their homepage,

I'm going to go in and add that Font Awesome code.

So I'll say span class fa fa-home.

So the fa says that I'm applying the Font Awesome class,

fa home is the specific icon for the home icon.

Thus so that is what I wanted to use on my homepage.

And then close the span tag- and then after the space, the home button.

So that will include the home icon in there.

I'm going to copy this and then for the about,

I'm going to use the same thing but instead of fa-home,

so notice give a space between the closing span tag and

about and instead of fa-home I would say fa-info.

Now these, I have figured out that these are the icons that I want to use.

You can check out the Font Awesome documentation to find

out which particular icons and how you include them.

For menu I will use a list icon there.

I call that icon as fa-list.

Now, also I'm going to use larger sized icons.

So I will also include fa-lg

into the icon classes fa-lg.

Now for contact I am going to use fa-home,

and then if this is fa-address-card fa-lg and save the changes.

You should repeat the same,

addition of the same icons even in aboutus.html page,

and then we'll take a look at our web page after we complete the changes.

After modifying also aboutus.html and index.html including the icons,

I have saved the changes and then here I am at my web page and note

how these icons got included into my navigation bar.

So you can see that there is a home icon in front of home,

there is an info icon in front of about,

a list icon in front of menu and an address card icon in front of contact.

So this is a nice way of adding some visual elements into your web page.

Now, this is wonderful.

Now what I want to do is now work on updating the footage.

Now, I want to replace the telephone fax and email with icons and

also turn all these into social media buttons here.

So to do that, we're going to make use of Font Awesome for this,

and then we're going to make use of bootstrap social for this.

Going to the footer of the index.html page,

I'm going to replace the telephone with Font Awesome icon.

So I would say, "i" as I mentioned,

you can either use span or I for specifying the Font Awesome icons.

Font Awesome website uses I but I'm showing you two possible ways of doing these things.

So I say fa fa-tel,

I'm sorry fa-phone and close the <i> tag here.

And for fax, I'm going to simply copy this,

and then for fax if it is fa-fax,

and for email it is fa-envelope and save changes.

Now apply the same to the aboutus.html page.

Going to my web page,

you immediately notice that the telephone, fax,

and email, are now replaced with the corresponding icons.

Now the last step is to use bootstrap social to replace

all these links with the social media buttons.

To get that done,

we'll go to the footer and then replace each of

these with their corresponding icons there.

So I would say, i class

Font Awesome fa-google-plus and

close the <i> tag there.

And then I'm simply going to copy this and then apply the same to the remaining ones.

So I will say, Facebook,

LinkedIn, Twitter,

YouTube, and finally for mail I'm going to

use an envelope icon there.

In addition, to turn this into bootstrap social patents to the A tags,

we should apply the classes as button button-social icon,

and then button-google doing the same to the remaining ones.

For the second one it would be Facebook,

then LinkedIn,

Twitter, Google and then for the last one,

since we don't have a corresponding bootstrap social icon button for the mail,

we won't have anything except button social icons.

Now with this, let's go and take a quick look at our footer.

Going to your footer, you can now see all the buttons have

been turned into their corresponding social buttons there.

Let's do the same change to the footer in aboutus.html.

So I'm just copying that code there and then going to aboutus.html,

and then simply replacing that in the footer of aboutus.html.

With that let's take one final look at our web page.

Going to our web page,

you can see that now

all the social media links there have been turned into social media buttons there.

Going to the about page,

you'll see the same thing in the about page also.

Now that you've completed this exercise,

this may be a good time to do a good commit with the message, icon fonts.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取

Coursera
关于
管理团队
工作机会
目录
证书
MasterTrack™ 证书
学位
企业版
政府版

社区
Learners
Partners
Developers
Beta Testers
Translators

连接
博客
Facebook
领英
Twitter
Instagram
YouTube
技术博客

更多
条款
隐私
帮助
内容访问
媒体
联系我们
目录
附属公司