1
00:00:00,000 --> 00:00:04,303
[MUSIC]

2
00:00:04,303 --> 00:00:06,765
Let us now talk about icon fonts.

3
00:00:06,765 --> 00:00:07,867
What are they?

4
00:00:07,867 --> 00:00:09,284
How are they useful?

5
00:00:09,284 --> 00:00:13,540
And how do we make use of them
in designing our website?

6
00:00:13,540 --> 00:00:18,958
Icon fonts provide a very
flexible way of including tiny

7
00:00:18,958 --> 00:00:24,732
images into our web pages that
can be styled just like text.

8
00:00:24,732 --> 00:00:30,753
So that is the reason
icon fonts prove very,

9
00:00:30,753 --> 00:00:35,840
very useful in designing websites.

10
00:00:35,840 --> 00:00:40,290
Using icon fonts,
you can take a web page like this and

11
00:00:40,290 --> 00:00:44,270
quickly turn it into a web page like this.

12
00:00:44,270 --> 00:00:50,381
Note the use of icons together
with the text in the nav bar,

13
00:00:50,381 --> 00:00:54,996
and then when you scroll
down to the footer,

14
00:00:54,996 --> 00:01:00,013
you can see more icons
being used in the footer.

15
00:01:00,013 --> 00:01:08,220
And also your social media links are now
replaced by social media buttons here.

16
00:01:08,220 --> 00:01:16,910
So these are the changes that icon fonts
will enable you to do to your website.

17
00:01:16,910 --> 00:01:22,367
So as I briefly mentioned earlier,
icon fonts are a set of symbols or

18
00:01:22,367 --> 00:01:26,219
glyphs that can be used
in your website design.

19
00:01:26,219 --> 00:01:29,519
These can be used just like regular fonts,

20
00:01:29,519 --> 00:01:34,390
just like regular text fonts
that you use in your website.

21
00:01:34,390 --> 00:01:38,953
Their advantage is that
you can style them and

22
00:01:38,953 --> 00:01:43,876
then expand and contract them and
use all typical

23
00:01:43,876 --> 00:01:49,657
stylings that you use on your text,
for your icons also.

24
00:01:49,657 --> 00:01:53,535
They are seen as a popular
lightweight replacement for

25
00:01:53,535 --> 00:01:57,159
simple graphics that you
can use in your web pages,

26
00:01:57,159 --> 00:02:01,750
simply graphics or
images that you can use in your web pages.

27
00:02:01,750 --> 00:02:07,290
And they are very,
very useful in designing your web pages.

28
00:02:07,290 --> 00:02:15,110
There are many icon font packs
that are available in the market.

29
00:02:15,110 --> 00:02:18,180
One of the most popular
ones is Font Awesome,

30
00:02:18,180 --> 00:02:19,377
which I'm going to talk about next.

31
00:02:20,590 --> 00:02:24,850
Font Awesome, as I say,
is a very popular icon font.

32
00:02:24,850 --> 00:02:28,770
It is available free for
use in designing your page design.

33
00:02:28,770 --> 00:02:32,975
It has been extensively used
by many different websites.

34
00:02:32,975 --> 00:02:37,580
We'll learn how to
download Font Awesome and

35
00:02:37,580 --> 00:02:42,940
then use it in web page in the exercise
that follows this lecture.

36
00:02:44,180 --> 00:02:49,982
Using Font Awesome in your
webpage is as simple as

37
00:02:49,982 --> 00:02:55,217
using some classes that
are applied to an i,

38
00:02:55,217 --> 00:02:59,897
or a span tag in your web page HTML code.

39
00:02:59,897 --> 00:03:02,480
So once you include the CSS and

40
00:03:02,480 --> 00:03:07,440
the font files that are available
through Font Awesome,

41
00:03:07,440 --> 00:03:13,860
then it is very straightforward to make
use of Font Awesome in your pages.

42
00:03:15,120 --> 00:03:20,491
Another common feature
that you would see on web

43
00:03:20,491 --> 00:03:27,337
pages is the use of social site
buttons there like Facebook,

44
00:03:27,337 --> 00:03:33,260
Twitter, Google+, and
YouTube and many others.

45
00:03:34,530 --> 00:03:39,931
Now fortunately for us,
there is this other CSS

46
00:03:39,931 --> 00:03:46,415
file called bootstrap-social
that you can download and

47
00:03:46,415 --> 00:03:50,873
make use of, including various social

48
00:03:50,873 --> 00:03:55,346
media site buttons into your web page.

49
00:03:55,346 --> 00:04:01,940
We will see the use of bootstrap-social
in the exercise that follows.

50
00:04:01,940 --> 00:04:06,532
Once you download the bootstrap-social css
file, you include that in your web page.

51
00:04:06,532 --> 00:04:11,385
And then together with
the Font Awesome icons,

52
00:04:11,385 --> 00:04:16,604
you can combine that with
bootstrap social classes

53
00:04:16,604 --> 00:04:22,688
to include various social media
buttons on your web pages.

54
00:04:22,688 --> 00:04:27,834
So without further ado,
let's move to the next exercise where

55
00:04:27,834 --> 00:04:32,787
we're going to use both Font Awesome and
bootstrap-social,

56
00:04:32,787 --> 00:04:37,546
a modified version of
bootstrap-social.css file that I

57
00:04:37,546 --> 00:04:42,984
provide on the exercise instructions
that you should download and

58
00:04:42,984 --> 00:04:48,647
include in your confusion project and
make use of it in the exercise.

59
00:04:48,647 --> 00:04:54,639
[MUSIC]