Favicon not working when uploaded but working well on localhost - html

I made a website with a favicon that was working a few days ago. Now, it is only working on my localhost. It's not appearing online. What could be the problem? I uploaded the favicon to public_html.
<link href="view/css/bootstrap.min.css" rel="stylesheet">
<link href="view/css/styles.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet" type="text/css">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/respond.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Related

Boostrap image slider not working when publishing site online

I have a Bootstrap image slider in my project, I only need the bootstrap js and css file for that slider. Everything works fine till I publish my site online. Then the imageslider is nowhere, the images aren't shown, just a white space.
I included jquery and popper because I read that is necessary but still it does not work. Why is that?
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script defer src="./scripts/popper.min.js"></script>
<link href="./styles/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="./styles/reset.css" type="text/css" rel="stylesheet" />
<link href="./styles/allstyles.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="shortcut icon" href="./img/huisstijl/logo.png" type="image/x-icon">
<script src="./scripts/bootstrap.bundle.min.js"></script>

The Title of my website isn't showing in the TAB after hosting it?

I'm a newbie in web development just started learning!
after i finished my first portfolio i tried hosting it in "www.000webhost.com" everything is working fine but the title and the favicon aren't showing at all .
but launching the index.html in my browser it works so fine!
here is the head code :
<head>
<title>E-Sabri | Welcome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/l.ico">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed" rel="stylesheet">
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://a2.muscache.com/airbnb/static/libs_jquery_2x-4c61948b1a5fa686ed70f7b9bf4a18c9.js" type="text/javascript"></script>
<script src="https://use.typekit.net/iun0wqe.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="css/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.js" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Vollkorn+SC" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
I'm looking forward to your answers thanks for your help !
The website url is : www.Esabri.tk
TLD services (like TK domains) offer two ways of shorten URL,
Redirect
iFrame
You are using the iFrame method, change it to 'Redirect' in the URL settings.
SOLVED
After trying over and over i decided to not park my domain but to POINT IT and it worked so fine ! thanks everyone for your answers have a good day

Moved to another server and some things stopped working

I have a webpage that was working fine on my VPS, I moved it to another VPS and some things on the page stopped working like the "clipboard.js" and the glyphicon icons. I can not figure out why. It's a one page website, and they are not php related to make me think that I am missing a php extension.
Below is my head section of the page. I am using cdns for eveything.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/language/en_US.min.js"></script>
<!-- for phone number! -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css" integrity="sha256-v8+xOYOnVjQoSDMOqD0bqGEifiFCcuYleWkx2pCYsVU=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.min.js" integrity="sha256-H7Mu9l17V/M6Q1gDKdv27je+tbS2QnKmoNcFypq/NIQ=" crossorigin="anonymous"></script>
<!-- for copy to clipboard -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script>
</head>

FontAwesome images appear as squares

Just started using font-awesome and all my images appear as squares if I use the font-awesome css locally. My code is straightforward:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
<link rel="stylesheet" type="text/css" href="font-awesome.css"/>
</head>
<i class="fa fa-truck"></i>truck
I put the font files in ../fonts/ as it says in the font-awesome.css. I also put the fa which is particular to version 4.0, and I also tried the CDN. However, with the CDN, I don't even get a square, I just get a blank. Anyone have any idea?
Thanks!

Textbox renders differently on IE and Chrome

My textbox renders very differently on IE and Chrome
IE
Chrome
You can see that width of textbox is small in IE.
My html is defined as
<input id="Name" data-bind ="value:Name" style="width: 210px"/>
I tried downloading normalize.css and included at top of my scripts , but still it renders incorrectly on different browsers.
I am sure there would be more input required, so do let me know what you guys need to resolve my issue.
These are the scripts i am using
<link href="css/normalize.css" rel="stylesheet" />
<script src="../Myfolder/External/jQuery/jquery-1.7.2.js"></script>
<link href="../Myfolder/External/jQuery UI/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script src="../Myfolder/External/jQuery UI/js/jquery-ui-1.8.20.custom.min.js"></script>
<link href="../Myfolder/Styling/common.css" rel="stylesheet" />
<script src="../Myfolder/External/Knockout/knockout-2.2.0.js"></script>
<script src="../Myfolder/External/JSON/json2.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/koExternalTemplateEngine_all.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout.validation.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout.mapping-latest.js"></script>
<link href="../Myfolder/External/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../Myfolder/External/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="../Myfolder/External/Bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="../Myfolder/External/Bootstrap/css/responsive.css" rel="stylesheet" />
<script src="../Myfolder/External/Bootstrap/js/bootstrap.js"></script>
<script src="../Myfolder/External/Kendo/kendo.web.min.js"></script>
<script src="../NewUI2013/AgrOD/external/amplify/amplify.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout-kendo.min.js"></script>
<script src="../Myfolder/External/Knockout/knockout.dirtyFlag.js"></script>
<script src="../Myfolder/Custom/customKO.js"></script>
<script src="../Myfolder/Custom/custom.js"></script>
Set height:25px or any other value should solve the issue. The problem most likely that since you used so many css files of external source, the browser maybe misinterpreting some of them.