CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapthemes
LukasMetlicka
LukasMetlicka

Reputation: 39

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

Upvotes: 0

Views: 2164

Answers (2)

Shrinivas Pai
Shrinivas Pai

Reputation: 7711

I had a similar problem

I fixed it adding the MIME type on IIS:

 .woff  application/x-woff

I used this answer for Reference

Upvotes: 0

Guilherme Silva
Guilherme Silva

Reputation: 140

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

Upvotes: 2

Related Questions