While designing I came across some problems with all of the fonts I have.
First, none of my fonts are loading. I have cdn's in the head tag of all of the fonts I need and they show up as colorful squares.
Second, I cant change any fonts for the text in the html, it just reads: font-family: 'Abril Fatface';, I added the font family of anything else in my scss *{} tag, but it did nothing, tried to add the font straight in the html tags but that also did nothing.
I amusing newest Bootstrap-4.0.0-alpha.6
Here's my head tag
<head>
<title>Q-bit</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap-4.0.0-alpha.6-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Font awesome-->
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<!--devicon icons-->
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<!--Baguetteox for the gallery-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<!--jquery-->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./styles/jquery.ba-throttle-debounce.js"></script>
<!--floating icon slider-->
<script src="./styles/floatingcarousel.min.js"></script>
<!--My Styles-->
<link rel="stylesheet" href="./styles/styles.css">
<!--LoadData-->
<script src="./styles/loadData.js"></script>
</head>
And here's the call to font-awesome style:
<button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-target="#collapseNav" aria-controls="collapseNav" aria-expanded="false" aria-label="Toggle navigation" id="toogleIcon">
<span class="fas fa-angle-down my-toggler" id="faToggler"></span></button>
the devicons are listed in the floating carousel, but they all are defined in this style:
<li><span><i class="devicon devicon-angularjs-plain-wordmark colored"></i></span></li>
In my scss file, I had:
*{
background:#ffffff;
}
and I'm not sure why, but it blocked all fonts.
Related
I'm trying to add the clock picker Jquery plugin to my website. I build it first in the extern file, then I migrate the code into my website html, but doesn't work.
I already try to fix the problem with the console, and I see an error 404 with the link, ../css/style.css, but the problem I didn't add any link about a file "style.css".
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap - CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/reservation.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!--Font-->
<!-- Jquery JS & CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Time-Picker CSS -->
<link rel="stylesheet" href="src/css/datetimepicker/clockpicker.css">
<!-- Time-Picker JS -->
<script type="text/javascript" src="src/js/clockpicker.js"></script>
<script type="text/javascript" src="src/js/mesfonctions.js"></script>
<title> Réservation - Café Restaurant du Chemin de Fer</title>
I expect that the trouble doesn't come from my html file actually. Can have a problem with the clocktimer.js (the plugin I mean?)
I need one help.I want to set config file which will keep all javascript file path and in index page it will called dynamically and include using angular.js or Javascript. I am explaining my file below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<!--<script src="js/angularroute.js" type="text/javascript"></script>-->
<script src="js/angularuirouter.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link rel="stylesheet" type="text/css" media="all" href="css/angular-datepicker.css" />
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div ui-view>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/shortcut.js"></script>
<script src="js/defaults.js"></script>
<script src="js/logout.js"></script>
</body>
</html>
As you can see here i have many javascript and css file links.Here i need i will set path in any other file , call them to this index.html and will include using Loop.Please help me.
You can do what you want using gulp or grunt. In case you are not using one of them yet, I suggest you to take a look at them.
For your specific case, there are several tools you can use. For example, for gulp, you can use this gulp-inject.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Last week i launched a site live in production using Foundation 5. I have tried everything with this application using respond.js, htmlShiv.js and much more. I have made sure to include the shivs and respond.js after my css and for the most part it works however, the nav bar appears collapsed and expanded as someone would view through mobile. The site also looks completely different in IE8 compatibility mode even after I have included
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />.
Most users which will be hitting the application will be from school districts and they never update their browsers therefore, I need to support back to it.
Here is the nav bar in IE8 Compatibility Mode
Here is the nav bar in IE8 without Compatability Mode.
Here is the nav bar in Chrome and this is how it is supposed to look like.
Any help would be appreciated as I have applied every solution possible out there by moving my respond and shivs around. Making sure im not using CDN's for my css or any of my js files. I am stumped why this inconsistent behavior exists.
Here is my code for the nav bar.
<nav class="top-bar" id="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<div class="name-logo">EBi</div><!-- title on navigation -->
</li>
<li class="toggle-topbar menu-icon">
<em class="fa fa-bars"></em> </li>
</ul>
<section class="top-bar-section" id="menu"><!-- menu -->
<ul class="nav-bar-section">
<li><div class="home"><strong>EB</strong>i</div></li>
<li>Our Story</li>
<li>Educator Solutions</li>
<li>Our Team</li>
<!--<li>Let's Talk</li>-->
<li>Contact</li>
<!----><li title="Soon EBi-AR.com will allow you to log in to your EBi account"><div class="login">Login</div><img src="images/logo/bubble2.png" style="padding-bottom:10px; padding-left:5px;"></li><!---->
</ul>
</section><!-- .menu -->
</nav>
</div>
Here is my head with the references.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="description" content="" />
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,100italic,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<!-- CSS -->
<link rel="stylesheet" href="stylesheets/font-awesome.min.css" />
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/component.min.css" />
<link rel="stylesheet" href="stylesheets/theme.css" />
<link rel="stylesheet" href="stylesheets/flexslider.css" type="text/css" media="screen"/>
<!-- JavaScript -->
<script src="js/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="./stylesheets/ie8.css">
<link rel="stylesheet" type="text/css" href="./stylesheets/IE.css">
<script src="./js/htmlShiv.js"></script>
<script src="./js/respond.js"></script>
<script src="./js/ie8-head.js"></script>
<script type="text/javascript" src="./js/nwmatcher.js"></script>
<script type="text/javascript" src="./js/selectivizr.js"></script>
<script type="text/javascript" src="./js/PIE.js"></script>
<![endif]-->
</head>
I am including scripts in the bottom of my webpage as well.
<script src="js/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/masonry.min.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/classie.min.js"></script>
<script src="js/AnimOnScroll.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/headroom.min.js"></script>
<script src="js/toucheffects.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/app.js"></script>
<script src="js/plugins/jquery.fitvid.js"></script>
<script src="js/plugins/froogaloop.js"></script>
<!--fixes IE not formatting content correctly-->
<script src="js/rem.js" type="text/javascript"></script>
<!--.fixes IE not formatting content correctly-->
<!--[if IE 9]>
<script src="./js/ie8.js"></script>
<![endif]-->
If there is anything sticking out to anyone which is quite noticeable i would really appreciate the guidance as I have been stumped on supporting back to IE8 corrrectly.
Foudation doesn't support Internet Explorer 8.
Furthermore IE8 in compatibility mode behaves like IE7 which has a non-standard box model.
I have an issue that's driving me bonkers.
Im using a _Layout.cshtml file with Scripts rending on top.
from _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- CSS Start -->
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<!-- CSS End -->
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- Javascript Start -->
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/customJS.js"></script>
<!-- Javascript End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
All scripts works like a charm, except one thing. I'm using a code in a webgrid that displays data on hover using popover()
from customJS.js
$(function () {
$('[data-toggle="popover"]').popover()
})
Every thing work well, untill i use webgrid paging or sorting, then the code breaks an i need to reload the page to make it work. Now to the kicker, if i place all scripts on the bottom the popover works while paging and sorting but my jquery-ui dialogs breaks and won't display, plus i get jquery undefined errors.
I have spent some time now searching and trying different solutions with no correct result in sight. What am i doing wrong?
Here is the code for the popover call also
FileGrid.Column("Description", style: "width-20", format: #<button role="button" tabindex="0" class="btn btn-success btn-block" data-toggle="popover" title="File Information" data-content="#item.Description" data-trigger="focus"><i class="fa fa-book"></i> View file Description</button>),
Okay my problem is that the less files are not working on the live server. I have made double sure that they are there and that the paths are correct, but it just is not working.
This does however work fine on the localhost.
My script is as follows
<link href="fonts/fonts.css" rel="stylesheet">
<!-- CSS files for plugins -->
<link href="stylesheets/pace.preloader.css" rel="stylesheet">
<link href="stylesheets/animate.css" rel="stylesheet">
<link href="stylesheets/parallax.css" rel="stylesheet">
<link href="stylesheets/owl.carousel.css" rel="stylesheet">
<link href="stylesheets/owl.theme.css" rel="stylesheet">
<link href="stylesheets/magnific-popup.css" rel="stylesheet" >
<link href="stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="stylesheets/foliohover.css" rel="stylesheet">
<link href="stylesheets/fancymenu.css" rel="stylesheet">
<link href="stylesheets/intro.css" rel="stylesheet">
<link rel="stylesheet" type="text/less" href="less/color.less" />
<!-- Main Template Styles -->
<link href="stylesheets/main.css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" rel="stylesheet">
<!-- Main Template Retina Optimizaton Rules -->
<link href="stylesheets/main-retina.css" rel="stylesheet">
<!-- LESS stylesheet for managing color presets -->
<!-- LESS JS engine-->
<script src="less/less-1.5.0.min.js"></script>
<script src="javascripts/modernizr.custom.js"></script>
If you open inspect element you will see the 404 errors for the less files
View the site live here: www.codethis.co.za
Please any help would be much appreciated