CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
malcoauri
malcoauri

Reputation: 12199

Awesome fonts with Boostrap in a simple HTML page

There is the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/font-awesome.css">
    </head>
    <body style="width: 900px;">
        <div class="icons">
            <div class="btn-toolbar">
              <div class="btn-group">

                <a class="btn" href="#"><i class="icon-align-left"></i></a>
                <a class="btn" href="#"><i class="icon-align-center"></i></a>
                <a class="btn" href="#"><i class="icon-align-right"></i></a>
                <a class="btn" href="#"><i class="icon-align-justify"></i></a>
              </div>
            </div>
        </div>  
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
    </body>
</html>

Structure of the project:

bootstrap_learning:
  css:
    bootstrap.css
    font-awesome.css
  fonts:
    fontawesome-webfont.eot
    fontawesome-webfont.svg
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    FontAwesome.otf
  js:
    bootstrap.min.js
  index.html

fonts-awesome.css:

/*!
 *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
... Standard font-awesome.css file

But when I open index.html in Chrome/Firefox I see no icons... What I did wrong? Thanks in advance.

Upvotes: 1

Views: 427

Answers (2)

Naveen Setty
Naveen Setty

Reputation: 625

Folder structure is good. Nothing wrong in that. For Font Awesome, class names like this are required: 

<i class="fa fa-area-chart"></i>

You are probably using some other class names. Please use appropriate class names so that you will get icons.

Upvotes: 1

baao
baao

Reputation: 73251

You need the fa class specified in front of the icon, 

fa fa-align-left

for example

Have a look here for all the icons and their names

Upvotes: 2

Related Questions