Search code examples
javascriptcsstwitter-bootstrapbootstrap-datetimepicker

The icon from Bootstrap css file not loaded when offline

I have datetime picker, The problem is no icon appear in the page. But if I disable line (comment out) from local bootstrap.css then add hyperlink bootstrap.css from http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css its worked perfectly. So why? I want to local css file that I used to offline, I dont want to online css rendering. Here my code :

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

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/moment.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>


<script src="js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
 <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' data-date-format="MM/DD/YYYY HH:mm" class="form-control" />
                        <span class="input-group-addon">
                           <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker1').datetimepicker();
               format : 'MM/DD/YYYY'
                });
            </script>
        </div>
    </div>
        </form>
    </body>
    </html>

So its work if with this line, 

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

I was downloaded that css then I used for offline but it not working. Please Help Thank you,

Solution

  • Place all the contents of bootstrap package in the folder including fonts provided by bootstrap

    bootstrap folder structure is like

        bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   └── bootstrap-theme.min.css.map
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

    you have not included the Font folder. Just Download the whole whole bootstrap package from there official site and keep the folder structure same and then include the css file as 

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