Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Glyphicons

Hello Everyone,

Does anyone know how to use the glyphicons that bootstrap provide? I want to in include some in my navbar in my website.

Here is the HTML as it stands:

<!DOCTYPE html>

<html lang="en">


<head> 
       <title> </title> 

       <meta charset="utf-8">

       <meta name="viewport" content="width=device-width, initial-scale=1">

       <link rel="stylesheet" href="bootstrap.css"/>

       <link type="text/css" rel="stylesheet" href="stylesheet2.css"/>  
</head>

<body>
       <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                  <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <img alt="#" src="munchlogoweb(1).png">
                        </a>
                      <ul class="nav navbar-nav navbar-left">
                        <li><a href="dashboard.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
                        <li><a href="settings.html"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a></li>
                      </ul>

                      <ul class="nav navbar-nav navbar-right">
                        <li><a href="help.html"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a></li>
                      </ul>
                </div>
            </div>
        </nav>



         <div class="container">
          <div class="row">
                    <div class="col-md-3">
                    <a href="createoffer.html"><img src="createoffericon(1).png"></a>
                    <div class="text1"><a href="createoffer.html">Create Offer</a></div>
                </div>

                <div class="col-md-3">
                <a href="stats.html"><img src="statsicon(1).png"></a>
                <div class="text2"><a href="stats.html">Stats</a></div>
            </div>

                <div class="col-md-3">
                <a href="settings.html"><img src="settingsicon(1).png"></a>
                <div class="text3"><a href="settings.html">Settings</a></div>
            </div>

                <div class="col-md-3">
                <a href="help.html"><img src="helpicon.png"></a>
                <div class="text4"><a href="help.html">Help</a></div>
                </div>
            </div> 
        </div>
    </body>
</html>

And the CSS:

body {
  background-color: #FFFFFF;
  padding-top: 50px;
}

.navbar-fixed-top {
  width: 110%;
  height: 56px;
  background-color: #FF3F34;
  margin-top: -8px;
  margin-left: -10px;
}

.navbar li  {
  display: inline;
}

.glyphicon {

}

.logo {
  display: inline;
}

.logo img {
  margin-top: 7px;
  margin-left: 235px;
}

.container-fluid {
  margin-left: 140px;
}


.col-md-3 {
  display: inline;
  margin-top: 230px;
}

.text1 a {
  text-decoration: none;
  font-family: Verdana, sans serif;
  font-size: 24px;
  color: #333333;
  display: inline;
}


.text2 a {
  text-decoration: none;
  font-family: Verdana, sans serif;
  font-size: 24px;
  color: #333333;
  display: inline;
  margin-left: 43px;
}

.text3 a {
  text-decoration: none;
  font-family: Verdana, sans serif;
  font-size: 24px;
  color: #333333;
  display: inline;
  margin-left: 25px;
}

.text4 a {
  text-decoration: none;
  font-family: Verdana, sans serif;
  font-size: 24px;
  color: #333333;
  display: inline;
  margin-left: 45px;
}

3 Answers

Sean T. Unwin
Sean T. Unwin
28,672 Points

This video nicely describes how to use the Bootstrap Glyphicons starting at 5:40. The video is from the Framework Basics course.

Justin Estrada
Justin Estrada
34,995 Points

Include the glyphicon library like you would a style.css file.

I personally use font awesome's library for icons. https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?ver=4.0.1 Then refer to their cheat sheet on the website: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Call the class you want. For exampe: <head> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?ver=4.0.1' type='text/css' media='all' /></head> <body> <i class="fa fa-android"></i> </body>

Michael Aguilera
Michael Aguilera
19,379 Points

Check to see if you have included the icon images into your project.