I want to use the custom font in all of the pages of the website and right now I use this:
#font-face {
font-family: IRANSans;
font-style: normal;
src: url('./assets/fonts/iran-sans/eot/IRANSansWeb.eot');
src: url('./assets/fonts/iran-sans/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('./assets/fonts/iran-sans/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('./assets/fonts/iran-sans/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./assets/fonts/iran-sans/ttf/IRANSansWeb.ttf') format('truetype');
}
* {
font-family: IRANSans !important;
}
I also use the Angular Material fonts like this :
<head>
<meta charset="utf-8">
<title>Vex - Angular 9+ Material Design Admin Template</title>
<base href="/">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
</head>
When I need to show the icons I get this message:
But when I remove this line it displays the icons properly:
* {
font-family: IRANSans !important;
}
What's the problem and how can I solve it?
The above answer is correct: * means all.
What you can do: You can try to set the iran font for all but not the icons.
please try this selector
*:not(.material-icons) { font-family: IRANSans !important; }
instead of *
Related
EDIT: It turns out it was only an issue on my computer, but an explanation would still be helpful if you have one. Thanks again!
I am attempting to create a development page for a website I am working on, and have a blank index.html page that redirects you to the development page. This all works as intended. I am using svelte to make things easier in future, however, when I deploy it, the svelte "Hello World" that shows up upon creating a new svelte project keeps appearing on top of the development page HTML. The odd thing about this is that it only happens when I deploy it, not when I load up the static HTML, not when I load up a local server. It doesn't even show up if I don't use a custom domain name. I am using cloudflare pages and cloudflare to redirect the domain name to the cloudflare page. My domain is registered with GoDaddy, if that at all matters.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/public/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function() {
window.location.replace("under-construction/under-construction.html");
}
under-construction/under-construction.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='under-construction.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="under-construction.js"></script>
<div class="overlay">
<h1 class="title">Book Planet UK is currently undergoing development.</h1>
<span class="title">We are hoping to be back by 2023, so hold tight until then! 🚀️</span>
<br>
<button onclick="location.href = '/public/staff/index.html';">Staff Login</button>
</div>
</body>
</html>
under-construction/under-construction.css
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
background-image: url("https://webgradients.com/public/webgradients_png/008%20Rainy%20Ashville.png");
}
.title {
background: transparent;
font-family: 'Roboto', sans-serif;
padding-top: 20px;
padding-left: 5%;
padding-right: 5%;
}
.overlay {
background: rgba(240, 248, 255, 0.375);
border-radius: 10px;
padding-left: 5%;
padding-right: 5%;
width: auto;
max-width: max-content;
height: auto;
}
button {
background: transparent;
font-family: 'Roboto', sans-serif;
width: 20%;
height: 35px;
color: #242024;
border: 2px solid #242024;
border-width: 2px;
margin-left: 5%;
align-items: center;
border-radius: 3px;
margin-top: 25px;
margin-bottom: 25px;
transition: 0.25s ease;
}
button:hover {
transform: scale(1.05);
cursor: pointer;
}
src/app.svelte
<script lang="ts">
</script>
<main>
</main>
<style>
</style>
The non-custom-domain website is deployed at https://book-planet-uk.pages.dev/.
The domain is https://bookplanetuk.co.uk/. I get the feeling that this may be a "its on my machine" kinda thing, so let me know if it doesn't appear for you on the domain. I have restarted my computer just to check.
Thank you in advance for any and all help!
Your code is linked via the path /build/bundle.js, this looks like the path will remain the same, even if the code changes. That can easily lead to caching issues, where browsers will not get a newer version of the code.
To prevent this, build systems often add a hash to the file name or to a query string, so the URL will be different and the browser will get the new file. Would recommend doing something along those lines.
(This also applies to other resources like CSS.)
Remove the reference to bundle.js.
This question already has answers here:
How to get a leaflet map canvas to have a 100% height?
(3 answers)
Closed 8 months ago.
I'm doing the leaflet step by step for webmap with javascript, html and css.
The internet page is blank when I run the code, but the script doesn't show an error. Please, help
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial youtube</title>
<!-- leaflet css-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<style>
body{
margin: 0;
padding: 0;
}
#map{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<!--leafleat js-->
<script src="https://unpkg.com/leaflet#1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<script>
//inicialização do mapa
var map = L.map('map').setView([-14.23,-51.92], 4);
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'});
osm.addTo(map);
</script>
You need to set a non-zero height on the map div.
height: 100% results in a 0px height for your map div.
One of these rules will work.
height: 100vh;
height: 400px;
height: 50rem;
I am trying to make a fade in- fade out transition between two pages with full screen images. Currently I'm trying to achieve this with the swup plugin.
I can achieve a new full screen image on each page by setting a class on every html, like:
<!DOCTYPE html>
<html lang="en" class="home_bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
</body>
</html>
And css:
*{
margin: 0;
padding: 0;
}
.home_bg {
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
.about_bg {
background: url(img/ocean.jpg) no-repeat center center fixed;
background-size: cover;
}
nav{
font-size: 24px;
}
Html for the transition:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
<main id="swup" class="transition-fade">
<h1>This is home</h1>
</main>
</body>
</html>
And the css:
*{
margin: 0;
padding: 0;
}
nav{
font-size: 24px;
}
.transition-fade{
opacity: 1;
transition: 500ms;
}
html.is-animating .transition-fade {
opacity: 0;
}
There is also one line js for the transition:
const swup = new Swup();
My problem is I can't seem to get these two to work together. I either get the full image pages OR the transition, not the full image pages WITH transition. The problem seems to lie in the fact that the image has to be within the "swup". But every time I try to put my image there, I lose control over its size and proportions, even if I give it a class of its own.
Now I have tried about a zillion things and I have tried to google this for a few days but no luck. I have only been working with html, css and js with this. Should I be looking elsewhere?
Any help here is highly appreciated.
Thanks
I finally managed to solve this. It may not be the best solution, so if you have a better one, please let us know.
I added this html-part below the navigationbar:
<main id="swup" class="transition-fade">
<div class="background-parent">
<div class="background-home"></div>
</div>
</main>
And in the css:
.background-home {
width: 100%;
height: 100%;
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to host Material Icons offline for my offline web development project (I will not have internet on the computer where is deployed). From my Google search, I found this SO answer. BUT it is Not working for me. My question is how to make it work. How to host material design icons offline for my offline project?
I have attached a .zip file of my SSCCE project, which reproduces the problem, here.
Basically I downloaded the MaterialIcons-Regular.eot, MaterialIcons-Regular.ttf, MaterialIcons-Regular.woff and MaterialIcons-Regular.woff2 from here and put them in my project's directory.
Here is my index file:
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-fonts.css" />
<link type="text/css" rel="stylesheet" href="materialize.min.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<i class="material-icons">chevron_left</i>
</body>
</html>
And here is the CSS file.
#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;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* 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';
}
First way to add icons will be following:
Copy content of this file to you custom css file (for instance, material-fonts.css) https://fonts.googleapis.com/icon?family=Material+Icons
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
Copy the link from src url and put it in browser. It will download file. You need to put it file in the same directory where you save first file(material-fonts.css).
Update in material-fonts.css file src: url() as src: url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
Second example:
Looks like you download wrong files.
You need to download this directory and put it into your folder, previous files have to removed.
Your materialFontTest.php should look like:
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-icons.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<i class="material-icons">chevron_left</i>
</body>
</html>
Original but light weight Material Icons
This light-weight repository (https://www.npmjs.com/package/material-design-icons-iconfont) is a fork of the original repository of ~60MB but this is very much light weight because unnecessary files were removed from that original repository.
How to install?
step 1:
// install via bower/npm
bower install material-design-icons-iconfont
npm install material-design-icons-iconfont
step 2:
// import or link
#import "~material-design-icons-iconfont/dist/material-design-icons.css";
<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
How to use?
<i class='material-icons'>done</i> // remember to add class `material-icons`
more on https://material.io/tools/icons/?style=baseline
I think you downloaded wrong files from somewhere. This is the path that you have to download correct fonts from: https://github.com/google/material-design-icons/tree/master/iconfont or use the one in my GH repo that worked for you already.
Also you need to call only one css in your html (php) file, like this:
<link rel="stylesheet" href="material-fonts.css" />
hth, k
i'm new here ^^ Can you help me?
I've developed a very easy phonegap code-app.- First step: I've written this two lines in the cmd:
phonegap create Test
bower install bootstrap (this adds bootstrap and jquery).
- Second step: I've edited the content of index.html, index.js and I've written:
window.onload = function() {blink()};
function blink() {
$("#logo").fadeOut(500);
$("#logo").fadeIn(500);
$("#logo").fadeOut(500);
$("#logo").fadeIn(500);
window.setTimeout(link,2050);
}
function link(){
window.open("../www/otherpage.html","_self");
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components\bootstrap\dist\css\bootstrap.min.css">
<script src="bower_components\jquery\dist\jquery.min.js"></script>
<script src="bower_components\bootstrap\dist\js\bootstrap.min.js"></script>
<script src="/www/js/index.js"></script>
<style>
body {
font: 20px sans-serif;
line-height: 1.8;
color: #f5f6f7;
background-color: #0068ff;
}
p {font-size: 16px;}
.margin {margin-bottom: 40px;}
.bg-1 {
background-color: #0068ff;
color: #FFFFFF;
}
</style>
</head>
<body>
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<center><h1>This is a Title<br>Hello!</h1><div id="logo">Blinking message</div></center>
</div>
</body>
</html>
- Third step: I've written in the cmd:
phonegap build android
- Fourth step: I've tested the apk in my tablet and my phone, but the message doesn't blink and the page doesn't goes on by linking me to the other html page. What's wrong?Thanks!!!