Currently my navbar is about 50px high. I want it to be around 150px. I tried creating adding onto Bootstrap's navbar class by writing my own in the CSS file, but changing the height of navbar, nav, or anything else doesn't seem to affect the layout. How do I change the navbar height? also, the font color?
.navbar-inverse {
background-color: #337ab7;
border-color:#337ab7;
border-radius: 0px;
height:100px;
width:100%;
position: fixed;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
color: #fff;
background-color: #0e364c;
}
.navbar-inverse .navbar-nav>li>a {
color:#ffffff;font-family:
'Open Sans', sans-serif;
}
.navbar-inverse .navbar-brand {
color:#ffffff;
}
.menu {
display:none;
}
#media all and (max-width:768px){
/*login register*/
#import url(http://fonts.googleapis.com/css?family=Roboto);
<head>
{% load static %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css"
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<nav class="navbar navbar-inverse" id ="bar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> The Transparency Project</a>
</div><!--navbar-header close-->
<div class="collapse navbar-collapse drop_menu" id="content_details">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-search"></span> Opinions and Analysis</li>
<li><span class="glyphicon glyphicon-phone"></span> Contact</li>
</ul><!--nav navbar-nav close-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul><!--navbar-right close-->
</div><!--collapse navbar-collapse drop_menu close-->
</div><!--container-fluid close-->
</nav><!--navbar navbar-inverse close-->
<br>
<div class="container">
<div class="jumbotron">
<h1>sign up & login forms Tutorial</h1>
<p> click on login or sign up menu in header</p>
</div>
</div><!--container close-->
First you need to rearrange your stylesheets. Bootstrap needs to be first and your custom css file must come after Bootstrap in order to override it.
Here is the correct order:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
Now, in order to override the height of the navbar, in your custom stylesheet change the min-height of the .navbar class
.navbar {
min-height: 150px;
}
and for the color you need the following override:
.navbar-inverse .navbar-nav > li > a {
color: red; /* here goes the color of your choice */
}
You can edit it the way that you have, you just have to make sure your css files are loaded after the bootstrap file. Not before, which is what it looks like is happening.
This is based on the assumpation that this is your css file:
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
If you swap these two it should override bootstraps settings:
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
If bootstrap overriding your CSS property then you have to specify !important to your defined CSS Properties like,
.navbar{
height:150px !important;
}
For custom height you have to use !important in defining your height.
.navbar {
min-height: 150px !important;
}
Related
I am trying to create an active class for my navbar so the people can see what page they are on. I created the JQuery logic in the file but when I try to run my program it brings up an error: "Reference Error, $ is not defined". I tried installing a jquery package but that did not help. Below is the code:
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel = "stylesheet" href = "/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body class="main">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand text-white" href="/">Cody Blackwood</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/info">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/resume">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/contact">Contact</a>
</li>
</ul>
</div>
</nav>
<script>
$(document).ready(function() {
$(".nav-item").on("click", function(event){
$("li.nav-item").removeClass("active");
$(this).addClass("active");
});
});
</script>
CSS:
.navbar-nav .nav-item .nav-link {
color: white;
}
.navbar-nav .nav-item:active .nav-link{
background-color: white;
color: #5900b3;
}
Bootstrap getting started says:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery,
So you miss this line from the header:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
ejs is a template and it will generate a valid html.
It seems like your code run at server side.
Make sure the jQuery has been loaded properly
Your js code should be run in client side, warp by <script></script>, not <% %>
Run your code while DOM is ready window.onload = () => { /* ... */ }
ejs functions defined between the <% %> are loaded before the contents of the page are rendered, so when you try to $('#id1').doSomething(); jquery won't be able to find the element with id="id1" because that element doesn't exist yet.
If you want to modify the nav bar in the way you are describing, you will have to create a
<script src="jquery.js"></script>
underneath the elements(s) you want to modify.
jquery.js would look something like this:
$(document).ready(function() {
$(".nav-item").on("click", function(event){
$("li.nav-item").removeClass("active");
$(this).addClass("active");
});
});
If you are still having issues after trying this, then you probably don't have jquery setup correctly.
Follow this link to learn about setting up jquery on node.js.
If you want to learn how to mute the linter warnings, look here.
Edit
<script>
$(document).ready(function() {
$(".nav-item").on("click", function(event){
$(this).closest("li").css('background-color', 'red').siblings().css('background-color', 'white');
});
});
</script>
I am in a bit trouble as I don't know how to implement the image popup in jquery for firebase. I have searched it on the internet but did not find the way how to implement it for the dynamic websites. I am having the following jquery code, can anyone help? I haven't found anything on stackoverflow also regarding this.
this is my html code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>images</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="overrides.css">
</head>
<style>
.contentImage{
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: 40%;
transition: .5s ease;
backface-visibility: hidden;
}
.image:hover {
opacity: 0.3;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">here is the title</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Your images</li>
<li class="active">Public images</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" id="contentHolder">
</div>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyB181Itkz9i9YjeJYLq9GbF94p8409wEfE",
authDomain: "farmyantra.firebaseapp.com",
databaseURL: "https://farmyantra.firebaseio.com",
storageBucket: "farmyantra.appspot.com",
messagingSenderId: "146534813177"
};
firebase.initializeApp(config);
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="timeline.js"></script>
</body>
</html>
and this is my js file
$(document).ready(function(){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var token = firebase.auth().currentUser.uid;
queryDatabase(token);
} else {
// No user is signed in.
window.location = "index.html";
}
});
});
function queryDatabase(token) {
firebase.database().ref('/Posts/').once('value').then(function(snapshot) {
var PostObject = snapshot.val();
var keys = Object.keys(PostObject);
var currentRow;
for (var i = 0; i< keys.length; i++) {
var currentObject = PostObject[keys[i]];
if (i % 4 == 0) {
currentRow = document.createElement("div");
$(currentRow).addClass("row");
$("#contentHolder").append(currentRow);
}
var col = document.createElement("div");
$(col).addClass("col-lg-3");
var image = document.createElement("img");
image.src = currentObject.url;
$(image).addClass("contentImage image hover ");
var p = document.createElement("p");
$(p).html(currentObject.caption);
$(p).addClass("contentCaption");
$(col).append(image);
$(col).append(p);
$(currentRow).append(col);
//create new row on every third entry
//col-lg-4
}
// ...
});
}
Well, your question is not clear. However let me try to answer as per my understanding. If you want to display images in a popup, add a bootstrap modal to html, and on click of each image that you are displaying from firebase database,show the bootstrap modal as explained below:
Add this modal div to your HTML:
<div id="imageModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Caption goes here..</h3>
</div>
<div class="modal-body">
<div id="image"> </div>
</div>
</div>
</div>
Now in your timeline.js file, add below code:
$('img').on('click', function () {
$('#imageModal #image').empty();
var imgUrl = $(this).attr('src');
var caption = $(this).siblings('.contentCaption').html();
$('#imageModal #image').append('<img width="100%" height="100%" src="' + imgUrl + '"></img>');
$('#imageModal .modal-title').text(caption);
$('#imageModal').modal('show');
});
Note: There is a small error in your queryDatabase function:
var image = document.createElement("img");
image = document.createElement("div")
image.src = currentObject.url;
You are creating an image element and assigning the same variable to a div element. So, the image element is overwritten by div element. Delete the second statement image = document.createElement("div") for you to display the image element.
I have a navbar in which I can't really see the .active color as I am using a 3rd party theme that I really like, but however I have one problem with the theme. I can't properly see which of my navbar items that is currently active. Therefore I want to add a background color to the .active element.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<!-- MOBILE FIRST -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- THEMES -->
<!-- <link href="css/theme_black.min.css" rel="stylesheet"> -->
<!-- <link href="css/theme_white.min.css" rel="stylesheet"> -->
<!-- HOMEMADE - these files are local -->
<!-- <script src="js/functions.js"></script> -->
<!-- <link href="css/custom_style.css" rel="stylesheet"> -->
</head>
<body>
<header id="header" class="header clearfix no-padding">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test</a>
</div>
<div class="collapse navbar-collapse no-padding">
<ul class="nav navbar-nav pull-right" id="navigator">
<li id="home"><a class="border" href="#">Home</a></li>
<li id="about"><a class="border" href="#">About</a></li>
<li id="cv"><a class="border" href="#">CV</a></li>
<li id="contact"><a class="border" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
I am using the following code in my javascript to change the .active item
functions.js
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
I do however want to change the background of the active item, and I have tried a couple of different solutions in my css, but none of them work as intended.
custom_style.css
.no-margin {
margin: 0;
}
.no-padding {
padding: 0;
}
//some sort of .active {
// background-color: blue;
//}
EDIT:
Now with a fiddle: https://jsfiddle.net/819qbftg/2/
To achieve what you want, you have to do two things, make sure you address the right item with JavaScript and override the default styling that's been set by the Bootstrap CSS.
JavaScript (jQuery)
var selector = '.nav li';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
You were addressing the #nav, but in your HTML, there was only a class with nav, no ID. Also, don't add the class to the href attribute.
This JS code will first remove .active from all selectors (.nav li) before setting it again on the item that's clicked.
Styling added
.navbar-default .navbar-nav>.active> a,
.navbar-default .navbar-nav>.active> a:focus,
.navbar-default .navbar-nav>.active> a:hover {
background: red; /* Anything you want */
}
See this JSFiddle for a demo.
Override these styles...
<style>
.navbar-default .navbar-nav>li>a:focus { color: #DD0000; }
.navbar-default .navbar-brand:focus { color: #DD0000; }
</style>
I took your file above and put this style tag at the bottom of the <head>. Seems to do what you're asking. I usually do this in a separate CSS for the site that is included last in your CSS links.
I'm teaching myself JavaScript and I'm trying to make a random background color appear when a button is clicked. Below you can find my code:
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center" onclick="randomColors">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
<script src="js/random-color.js"></script>
</body>
</html>
Here is my CSS Code:
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
And lastly, my JavaScript Code. This is where I'm having most of my trouble to be honest.
function randomcolor(){
document.getElementById('background').style.color =randomColors();
}
function randomColors(){
return '#' + Math.floor(Math.random() * 16777215).toString(16);
console.log("I'm working now")
}
Any help you can provide would be extremely helpful as this is all a learning experience for me. Thanks in advance!
It seems like its basically already been answered by others, but there is nothing wrong with repetition.
You are calling randomColors() instead of randomcolor().
You really shouldn't be using getElementById on the body tag. You can just use document.body to get the body.
You need to use style.background or style.backgroundColor to get the background color instead of text color.
You should be including your js scripts in <head> instead of near the bottom of your html document to ensure they are loaded before functions from them are called.
What happened is when your html loads, the onclick handler is undefined because your script hasn't been loaded as yet.. .hence you will get an an error in your console.log stating that your function is undefined. Move script tag above your onclick handler.
Snippet using .onclick
document.getElementById('button').onclick=randomcolor;
function randomcolor(){
document.getElementById('background').style.backgroundColor =randomColors();
}
function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
return result;
}
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
</html>
Snippet using addEventListener
document.getElementById('button').addEventListener('click',randomcolor,false)
function randomcolor(){
document.getElementById('background').style.backgroundColor =randomColors();
}
function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
return result;
}
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
</html>
First, you're using the wrong function in your callback. Use onclick='randomcolor()'. Make sure your JS functions are defined in the <head> of the document. Finally, document.getElementById('background').style.color is the text color, not the background color. Use document.getElementById('background').style.background = randomColors();
I'm currently designing a UI for an automated parking system. It needs to be able to work offline, as we don't know if the valet will have internet connectivity. I also need to use Material Design icons. I've ran tests of my html code to see if Material Design icons would work offline, however, on occasions the page would load fine, on other occasions Google Chrome would crash. I would be very grateful for insight on what is happening and how to ensure my page loads offline with the required material design icons.
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Import the css I designed for this UI specifically-->
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<!--Import Material Design icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import jQuery before materialize.js-->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Import jQuery Keypad CSS-->
<link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
<script>
$(document).ready(function(){
$('#inmenuKeypad').keypad({target: $('#ticket_num'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
});
});
</script>
</head>
<body>
<!--Page Title Panel-->
<div class="card-panel">
<h4>INPARK</h4>
<!--Options button, reveals dropdown menu with options to switch to other pages-->
<a id="optionsbtn" class='dropdown-button btn' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
</div>
<!--Dropdown menu structure and it's items-->
<ul id="dropdown1" class="dropdown-content">
<li>Dashboard</li>
<li class="divider"></li>
<li>Outpark</li>
<li class="divider"></li>
<li>Outpark Queue Menu</li>
<li class="divider"></li>
<li>Shuffle</li>
<li class="divider"></li>
</ul>
<!--The form where valet inputs the customer's ticket number for Inpark-->
<div class="row">
<form class="col s12" action="ineem.html"><!--Change to the action to send data to some kind of data handler page/script-->
<div class="row">
<div class="input-field col s5 offset-s3">
<input placeholder="Enter ticket number" id="ticket_num" type="text" class="validate">
</div>
<button class="btn waves-effect waves-light" class="col s9" type="submit">OK</button>
</div>
</form>
</div>
<!--Dashboard button, press to return to dashboard(FAB)-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
<i class="material-icons" style="font-size: 48px">home</i>
</a>
</div>
<!--Touchscreen Keypad-->
<div id="inmenuKeypad"></div>
</body>
</html>
You still have a link to https://fonts.googleapis.com/icon?family=Material+Icons inside the above code.
The only link for the icons in the HTML header I have is:
<link href="fonts/google-material/material.css" rel="stylesheet" />
The material.css file has the following definition:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
width: 1em;
/* height: 1em;
line-height: 1;*/
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
In HTML I use the &#x[code]; definition and the icons are displayed offline in all browsers like a charm:
<i class="material-icons"></i>
I got the library from: Material icons guide
See the Material Icons Guide section 'Getting Icons'. I use npm (or bower) like:
npm install material-design-icons --save
and then just source the material-icons.css file included in the package:
<link href="node_modules/material-design-icons/iconfont/material-icons.css"
rel="stylesheet">
Of course you need to change the path with whatever you serve.