Material icons not showing on a hosted webpages - html

I hosted a site on Github pages, and the material icons are not showing. The issue is that they are showing when I launch the index.html page from my browser (instead of going to the hosted page).
Here's the html for this part:
<head>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content blue-text text-darken-2">
<span class="card-title">Olivier Grech</span>
<p>Text</p>
<div><i class="material-icons">phone</i><em>Phone</em></div>
<div><i class="material-icons">email</i><em>mail</em></div>
</div>
</div>
</div>
<!--Rest of the page-->

Replace http with https and it will work:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If you open your developer tools(right click anywhere and click inspect, then go to the console), it would tell you whats wrong. In this case you were accessing the github page over https but were trying to load the font using http which is not considered safe and was blocked by the browser.

Related

How can I link a JS File from Parent Directory (Localhost)

Let me start with file management. So, there is a main.js and a main.css, both of them having the styles all the HTML Pages have. Now, there are HTML Pages inside child folders, so the directory looks like this:
/The Project
/main.js
/main.css
/Home
/index.html
/styles.css
/Study
/index.html
/styles.css
/scripts.js
When I run the HTML files as a file in the browser, it works perfectly. However, when I run it using python3 -m http.server, it does not link the CSS and JS files that are in the parent directory.
Thank you for answering in advanced!
Home/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Plompy</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body style="overflow-x: hidden;">
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="content">
<h1 class="title">Pompy - The Future of Creatures</h1>
<img src="academicean.png" alt="Academicean Logo" style="float:right;width:400px;height:400px">
<h2 class="body">HAHAHA LOL</h2>
<h1 class="title">Contact Us:</h1>
</div>
<div class="footer">
<h4 class="body">Best experiences may be with a computer, or laptop. Although compatible with other devices such as the hand held phone, not that the experience won't be as smooth as with a laptop.</h4>
</div>
</body>
</html>
Study/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Academicean</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body style="overflow-x: hidden;">
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="content">
<h1 class="title">Academicean - The Future of Reviewers</h1>
<img src="academicean.png" alt="Academicean Logo" style="float:right;width:400px;height:400px">
<h2 class="body">Academicean, which is the combination of Academic and Ocean, provides much resources to study or to review a topic. Whether thats Mathematics, English, Sciences or any of your academic subjects, you may review for it RIGHT HERE! There will also be a comment section, where you may gather some more opinions about a certain topic, and ask some questions if confused. So what are you waiting for? Log in or Sign up to be able to get started!</h2>
<h1 class="title">Contact Us:</h1>
</div>
<div class="footer">
<h4 class="body">Best experiences may be with a computer, or laptop. Although compatible with other devices such as the hand held phone, not that the experience won't be as smooth as with a laptop.</h4>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study - POmpley</title>
<link rel="stylesheet" href="../main.css">
<link rel="stylesheet" href="styles.css">
<script src="../main.js"></script>
</head>
<body>
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="container">
<h1 class="title">GOogle LOL</h1>
<div class="search">
<input type="text" id="searchbar" onfocus="change_note()">
<h2 id="note">Type something to search</h2>
</div>
</div>
</body>
<script src="scripts.js"></script>
</html>

HTML doesn't recognize css file and doesn't import it

No idea why I can't seem to be able to import a styles.css file into a standard HTML page.
The code compiles, but my page doesn't receive any changes whatsoever from the css file.
src/main/resources/templates/page.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<div class="card text-center">
<div class="card-header">
<h4 class="new-header">New header</h4>
<a class="btn btn-primary new-button">New button</a>
</div>
</div>
</body>
src/main/resources/static/css/styles.css
.new-button{
float:right;
}
.new-header{
float: left;
}
I've tried switching the href directory link to several others, such as :
/css/styles.css (the one used by a similar project);
/static/css/styles.css (the IDE considers this to be the best one)
You are looking in the wrong directory. Change the href to
<link rel="stylesheet" type="text/css" href="../static/css/styles.css"/>
the double dot at the start are necessary:
../static/css/styles.css

Why is Microsoft Edge underlining this span and treating it like a link? [duplicate]

This question already has answers here:
Remove Microsoft Edge's phone number styling
(4 answers)
Closed 3 years ago.
I have a relatively simple bit of markup on the header of a website I'm redesigning and it seems to display fine on browers I've tried but a rather odd thing happens in Edge (on Windows 10): the phone number in the header shows up underlined, as if it is a link, and when I click on it, it asks if I want to open Zoom. I know Zoom is a videoconferencing app but I don't even have it on my laptop where I am displaying this website so I'm not sure why it wants to offer to take me into Zoom. I just want to display a phone number and make it stand out a bit by colouring it differently than the surrounding text!
Here is a JSFiddle that shows my HTML and CSS (inline). And here's the code from the JSFiddle:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#phoneno {
color: aqua
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="page-content">
<div id="header">
<div class="row">
<div class="col-sm" id="Jones Chiropractic">JONES CHIROPRACTIC</div>
<div class="col-sm text-right" id="Doctor">Dr. Fred Jones</div>
<div class="col-sm ml-auto text-right" id="JonesContact">
123 Main St. W.<br> St. Louis, MO<br> Phone <span id="phoneno">(555) 555-5555</span><br> Fax (555) 555-5556 <br> joneschiropractic#gmail.com
</div>
</div>
<!-- row -->
</div>
<!-- header -->
</div>
</div>
</body>
</html>
Why does Edge underline the (first) phone number (but not the fax number) and why does it want to open Zoom? How do I make it just display it without the underline and persuade the browser not try to launch Zoom?
You should be able to override this if you put the following in the head section for your page:
<meta name="format-detection" content="telephone=no">
This page has more information on this.

Banner image doesn't display after directory change

I have a banner header that display's its banner image when in the main directory of the site but once I move the HTML file to a sub folder and update all the links to reflect the folder change the banner image no longer displays. In all of my code editors, the path to the image is set correctly. Below you will find the code in my header and also the section of code that isn't working properly. top-banner.jpg is the question at hand here. All other images on the page work and are in the same directory as the banner image. Any suggestions would be greatly appreciated.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
<meta name="description" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/flaticon.css" rel="stylesheet">
<link href="../css/fopen-sans.css" rel="stylesheet">
<link href="../css/raleway-webfont.css" rel="stylesheet">
<link href="../css/lato.css" rel="stylesheet">
<link href="../css/idangerous.swiper.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../img/favicon.ico" rel="shortcut icon">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/responsive.css" rel="stylesheet">
</head>
<div class="wpc-top-header overlay img-bg">
<img src="../img/top-banner.jpg" alt="banner" class="hidden">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="wrapper">
<div class="heading">Our Products</div>
<div class="subheding">
home<span class="round"></span>
pages<span class="round"></span>
Our Products
</div>
</div>
</div>
</div>
</div>
</div>
remove class="hidden" in <img src="../img/top-banner.jpg" alt="banner" class="hidden">
Edit: As can be seen from the provided links, the file /htmltest/js/scripts.js contains:
/*-------------------------*/
/* ADD BACKGROUND IMAGE */
/*-------------------------*/
$(".img-bg").each(function(){
$(this).css("background-image", "url("+$(this).find("img").attr('src')+")");
});
However, the path js/scripts.js is not updated to ../js/scripts.js, and this script is not executed. So just replace all js/into ../js/ in the HTML file.
Your old version adds a style into the div tag with class overlay. Its adding:
style="background-image: url("img/top-banner.jpg");"
So add that to your new <div> but obviously with the new path. That fixes it for me, so to clarify the line should now be:
<div class="wpc-top-header overlay img-bg" style="background-image: url('../img/top-banner.jpg');">

How to use Bootstrap CDN?

I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.
How would I go about resolving this- my code is attached bolow. ?
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<html>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Website</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog
</div>
</html>
As others have mentioned, using a CDN is usually as easy as adding:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
into your HTML. But this doesn't work when you are loading your html from a local file.
The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.
This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating private HTML that will be loaded from your disk, then you should add the protocol and use the CDN like this:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
I hope this will be useful to someone...
Hi Akkatracker I appreciate your question; it helped me. You can use a CDN for Bootstrap. Here is a simple complete html example where you do not have to download bootstrap since you are linking to a public content distributed network of the css & js files.
Simple Bootstrap CDN HTML Example
<html>
<head>
<title>Bootstrap CDN Simple Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Bootstrap CDN Simple Complete HTML Example</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Please note JQuery needs to come before bootstrap.js. The order of our JavaScript libraries is significant.
Hope this helps
follow this fiddle cdn usage http://jsfiddle.net/MgcDU
css
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
html
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn btn-primary btn-large" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
Learn more about Bootstrap
</a>
</p>
</div>
Make your HTML look like this:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog </div>
</body>
</html>
I am new to using Twitter Bootstrap as well as BootstrapCDN. I did some brief experimenting tonight and I made my site look correct, well almost, using the following 'Head'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
<!-- my custom stylesheet -->
<link href="/word/css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
</head>
So I have replaced the old style sheets with the ones provided at BootstrapCDN.com. I am not sure if it is proper to replace the existing stylesheets, but here goes to experimentation and my result is so so...
This gets everything styled almost right; well maybe its styled totally right. I am still stepping through the DOM tools to see why my modals are non-functional. I suspect my issue with the modals is the JavaScript and the fact the site was just migrated from a local folder.
Using Microsoft Ajax Content Delivery Network as Bootstrap CDN:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Demo</h1>
</div>
</body>
</html>