Exercise 8 - Icon Fonts

Icon Fonts
Objectives and Outcomes

In this exercise, we will learn the use of icons in web page design using Font
Awesome icons, and bootstrap-social icons. At the end of this exercise, you will be
able to:
 Use icons within your website to represent various entities making use of the
glyphicons, font-awesome icons and bootstrap-social icons
Note: Some people have pointed out that if they have AdBlocker installed, then the
font icons are not showing up in their browser.
Using Icon Fonts and Other CSS classes
 One of the most popular icon font toolkit is Font Awesome. Go to its website
http://fontawesome.io/ to check out more details about this icon font. You can
get Font Awesome using npm by typing the following at the prompt:
npm install font-awesome@4.7.0 --save
 Another module that we install is Bootstrap Social that enables the addition of
Social buttons to our site. You can find more information about it at
https://lipis.github.io/bootstrap-social/. To install it using npm, type the following
at the prompt:
npm install bootstrap-social@5.1.1 --save
 We now need to include the CSS files for font awesome and bootstrap-social in
the index.html file. Add the following code to the head of the file after the links
for importing Bootstrap CSS classes. Do the same change to aboutus.html file:
<link rel="stylesheet" href="node_modules/font-awesome/css/font-

awesome.min.css">
1
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-
social.css">
 Let us now use some font icons in our web page and decorate it. Update the
navbar's ul list items as follows in index.html:
<li class="nav-item active"><a class="nav-link" href="#"> Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"> Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#"> Contact</a></li>
 Similarly update the navbar's ul list items as follows in aboutus.html:
<li class="nav-item"><a class="nav-link" href="./index.html"> Home</a></li>
<li class="nav-item active"><a class="nav-link" href="#"> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"> Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#"> Contact</a></li>
 Next, in both index.html and aboutus.html, go down to the address in the footer
of the page and replace the "Tel.", "Fax" and "Email" with the corresponding
font awesome based icons as follows:
: +852 1234 5678 

: +852 8765 4321 
2
:
<a href="mailto:confusion@food.net">confusion@food.net</a>
 Finally, let us use the bootstrap-social CSS classes to create the social buttons
in the footer in both index.html and aboutus.html, by replacing the social sites'
links with the following code:
<div class="text-center">
<a class="btn btn-social-icon btn-google" href="http://google.com/+"></a>
<a class="btn btn-social-icon btn-facebook"
href="http://www.facebook.com/profile.php?id="></a>
<a class="btn btn-social-icon btn-linkedin"
href="http://www.linkedin.com/in/"></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"></a>
<a class="btn btn-social-icon btn-google" href="http://youtube.com/"></a>
<a class="btn btn-social-icon" href="mailto:"></a>
</div>
 Save all the changes and commit to your Git repository with the message "Icon
Fonts".
Conclusions
We learnt about using icon fonts in a web project.

Exercise 8 - Icon Fonts

Uploaded by

Copyright:

Available Formats

Exercise 8 - Icon Fonts

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Exercise 8 - Icon Fonts

Uploaded by

Copyright:

Available Formats

Icon Fonts

Objectives and Outcomes

Using Icon Fonts and Other CSS classes

npm install font-awesome@4.7.0 --save

npm install bootstrap-social@5.1.1 --save

<link rel="stylesheet" href="node_modules/font-awesome/css/font-

<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-

 Similarly update the navbar's ul list items as follows in aboutus.html:

<li class="nav-item"><a class="nav-link" href="./index.html"><span class="fa

<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br>

You might also like