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.
Exercise (Video): Icon Fonts
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Front-End Web UI Frameworks and Tools: Bootstrap 4
816 个评分
The Hong Kong University of Science and Technology
816 个评分
课程 1（共 4 门，Specialization Full-Stack Web Development with React）
从本节课中
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.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
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.
