Bootstrap Glyphicons not showing locally

Question

I'm trying to load a Bootstrap buttons that has a Glyphicon, but the icon won't show. The button picks every other CSS attached to it except the icons. Is my approach wrong in any way?

What I want >>> :

What I get instead:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../../bootstrap-3.3.5-dist/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="../../bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="../../bootstrap-3.3.5-dist/bootstrap.min.js"></script>

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
        <button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
        <button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
        <button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
    </div>
</div>

Answer 1

The folder structure you have is misconfigured as Boostrap expects the font files to exist in a folder one up and then down again in a folder called fonts, for example: ../fonts/xxxx . So if you have the Bootstrap files in the root, that will not work. Move your Bootstrap files into their own directory so your structure looks something like this:

root
  ----bootstrap
    ----bootstrap.css
    ----bootstrap.js
  --fonts
    --glyphicons.*

Answer 2

尝试在引导之前要求jquery库，这是我所做的，并且效果很好！