Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Roland Hagan
Roland Hagan
6,443 Points

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,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 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
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
Michael Aguilera
Michael Aguilera
19,379 Points

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