Twitter Bootstrap Question posted in

GET error Glyphicon-halflings-regular.ttf/woff/woff2 with custom Twitter Bootstrap theme from Lavish

I’m using Twitter Bootstrap V3.3.4 and this generated theme. Without the theme, the page loads fine, but when I link to the new theme (below the bootstrap link) the background color changes and the text color changes, but the divs and nav don’t change color and I get errors for importing the TTF, WOFF and WOFF2 glyphicon packs. i’ve also tried manually linking to those above bootstrap to no avail. Thanks!

The GET issue i've been having shown in the Chrome Console

<head>
<title>Leonardo in Italy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheets/subPages.css">
<link rel="stylesheet" type="text/css"   href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lavish-bootstrap.css">
</head>
<body ng-controller="subPagesController">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <a class="navbar-brand" href="index.html"><span class="glyphicon glyphicon-home"></span></a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navCollapseHeader">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navCollapseHeader">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="{{ subPages[0].link }}" role="button" aria-haspopup="true" aria-expanded="false">{{ subPages[0].name }}</a></li>
                <li><a href="{{ subPages[1].link }}" role="button" aria-haspopup="true" aria-expanded="false">{{ subPages[1].name }}</a></li>

                <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Exploring Leonardo<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="AIS.html">Artist, Inventor, Scientist</a></li>
                        <li><a href="exploring.html">Leo's Projects</a></li>
                    </ul>
                </li>

            </ul>

        </div>

    </div>
</div>
</body
Tags:

2

Answers


  1. 0

    Inside of the CSS there is going to be one IMPORT.. something like this

    @import "../fonts/fontello/css/fontello.css";

    Or something like this

    src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");

    This lines are trying to get the following on your website.
    make sure to have these files in the correspondent folder

    Login or Signup to reply.
  2. 0

    I had a similar problem

    I fixed it adding the MIME type on IIS:

     .woff  application/x-woff

    I used this answer for Reference

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search