I'm still learning Laravel 5.3 and started studying it a few days ago. One tutorial project I'm following made use of Fontawesome and Bootstrap where bootstrap link and fontawesome link was included within the <head></head> tag.
So I thought that if I disconnect the internet connection, it will fail to display the icons from fontawesome since no library file was downloaded and imported to project. But I was surprised that it still was able to display the fontawesome icons.
That's when I of thought of asking this simple question since I'm a beginner with Laravel and web programming. (Java programmer)
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#yield('title')</title>
<!-- bootstrap link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- fontawesome link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- app.css link -->
<link rel="stylesheet" href="{{ URL::to('css/app.css') }}">
#yield('styles')
</head>
I read something from Laravel 5.3 documentation about the bootstrap directory that stores cached information. Is the caching the reason the fontawesome icons still displays even when it is not connected to the internet?
The Bootstrap Directory
The bootstrap directory contains files that bootstrap the framework
and configure autoloading. This directory also houses a cache
directory which contains framework generated files for performance
optimization such as the route and services cache files.
I'd appreciate any explanation to this so I can better understand how it works.
Your browser has cache too. Do hard refresh / reload - in Chrome you can do this by opening inspector and then right click on refresh button and click what suits you the most.
Describing what is actually going on would be too long for an answer.
Good description what is going on is here.
Google search terms: browser cache, web browser cache
If you use build system (gulp) you will most likely end up with large *.css file which contains bootstrap, font-awesome definitions etc.
More on that is right in documentation.
Related
I've been developing a site with bootstrap 4 and linking externally to:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
However, I need to load the site locally as the network connection isn't stable. So I downloaded the full stack bootstrap-4.0.0 Source file and added it to my WebServer directory thinking all I need to do is change the link to to point to bootstrap.min.css, like this:
<link rel='stylesheet' href="http://localhost/webfiles/wp-content/themes/Cussons/bootstrap-4.0.0/dist/style.css?ver=4.9.4">
The site works, but I'm getting a 404 not found for style.css?ver=4.9.4
All permissions at set to allow full access and I cleared caches and all of the links href's appear correct, but I cant seem to get my head around why the site wont pick up the color changes I've added to files like /assests/scss/_navbar.ccss
If anyone can see whats wrong, I'll be very grateful :)
Just download the precompiled files here, place them in an accessible folder and then link them like :
<link rel="stylesheet" href="relative_path_to_css_parent_folder/css/bootstrap.min.css">
same for the js at the bottom of the body :
<script src="relative_path_to_js_parent_folder/js/bootstrap.min.js">
or
<script src="relative_path_to_js_parent_folder/js/bootstrap.bundle.min.js">
Take a look at this : How do I link to my css stylesheet for local file?
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="UI.css"> <!-- made up name-->
<script src="jquery.js"></script><!-- made up name-->
<script src="jquery.ui.js"></script><!-- made up name-->
<script src="script.js"></script>
But what if the js files are all in the projects/js/ folder? Point
your page to this location:
Assuming our HTML is in the blackjack folder, which is a sibling
folder to 'projects/js', then your script tags will look something
like this:
<script src="../js/script.js"></script>
Notice the ../? This references the parent folder of the one the
document is in. We go up one level to where the js folder is.
Im developing a golang webpage and am running into some troubles when deploying my page to google app engine (appspot.com). This is because Im running it using http when developing on my machine, but over https when deployed.
Google chrome doesnt like this so it blocks the content trying to be loaded over http. Im fine with this since I like security. But I cant find the source.
All my includes are https or //, or just local files.
Here is a image of the error in chrome.
This is some includes that I use. Maybe some of them is loading a font?
<link href="/static/css/googlefont.css" rel='stylesheet' type='text/css'>
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
<link href="/static/css/sweetalert2.css" rel="stylesheet" type="text/css">
<link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/static/css/modal.css" rel="stylesheet" type="text/css">
<script src="/static/js/jquery.js"></script>
<!--<script src="/static/js/jquery.min.js"></script>-->
<script src="/static/js/register.js"></script>
<script src="/static/js/login.js"></script>
<script src="/static/js/sweetalert2.min.js"></script> <!-- Sweetalert -->
<script src="/static/js/spin.min.js"></script> <!-- ?? -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/stuff.js"></script>
<script src="/static/js/flat-ui.min.js"></script>
<script src="/static/js/application.js"></script>
<script src="/static/js/bootbox.js"></script>
I cant seem to find the source..?
Thankful for any help in the right direction, i'm going crazy here..
Check all the CSS stylesheets your document is loading, including any CSS stylesheets that are getting loaded through an #import. In one of the CSS stylesheets, you most likely have a rule with a url(…) call something like this:
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/fhNmDCnjccoUYyU4ZASaLVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
Use the Network tab (or equivalent) in your browser devtools to get a view of all the resources your document is loading. You can sort that resource view by type. So, set it to sort by type and then look through the source of all the type=stylesheet or type=css resources to see which one has a url(…) that uses an insecure http scheme.
If someone hasn't already, there really should be a feature request lodged with Google. The fact that Chrome knows the location of the error but just displays "(index):1" in the developer console just doesn't cut it.
In the meanwhile, the easiest way to find the offending CSS in Chrome (ver 68) is to "Customize and control DevTools" by clicking on the 3 dots in the top right corner of the development console and clicking "Search" ) or "Ctrl+Shift+S". You might have to drag up the horizontal pane at the bottom of the screen.
In one of my magento website I have added favicon using
magento admin panel > system > configuration > design > HTML head > favicon icon
It was displaying nicely in magento home page but not showing in inner pages. I have changed the current configuration scope to store view and did the same proccess. still it is not working. I hacve cleared caches and re-indexed. but it is not working.
Why is it so? How can I solve this?
Thank you.
# jatinder kumar you may need this only?
<link rel="icon" href="http://navaani.in/media/favicon/stores/17/favicon_1.png" type="image/x-icon">
<link rel="shortcut icon" href="http://navaani.in/media/favicon/stores/17/favicon_1.png" type="image/x-icon">
<link rel="shortcut icon" href="http://navaani.in/skin/frontend/base/default/images/dresscode_images/favicon.ico">
<link rel="apple-touch-icon" href="http://navaani.in/skin/frontend/base/default/images/dresscode_images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://navaani.in/skin/frontend/base/default/images/dresscode_images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://navaani.in/skin/frontend/base/default/images/dresscode_images/apple-touch-icon-114x114.png">
<link href="//fonts.googleapis.com/css?family=Amaranth:200,300,400,500,600,700,800" rel="stylesheet" type="text/css">
Ask me if you want more. Thank you.
We experienced similar. We resolved this (if I'm understanding your issue correctly) by overwriting the default favicon.ico in the root folder with ours.
Note, browser caching in relation to favicon.ico is extremely zealous :) As such, you will probably only see the change by opening the site in a browser you haven't opened the site in previously or on a different machine.
I am writing a html page using bootstrap3 template and including the respond.js in that, but when I run it on IE8, it gives me error "Access is denied" in console.
I am using this to make IE8 support media queries. I have tried a lot of things as given on forums, but no luck. Does respond.js works locally or we need to run on a localhost/web server?
Respond.js link - https://github.com/scottjehl/Respond
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="main-cont">
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS - main.css
.main-cont {background:#2d3a42; height:100px;}
Per the Respond.js Docs...
"Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses xmlHttpRequest). Run it on a web server."
Specifically, "Respond.js re-requests the CSS files using Ajax and parses the text response," which is where IE's local security policy is blocking you. Another user elsewhere suggested changing the security settings in IE, but I can't confirm that solution since my copy of IE8 doesn't permit me to change those settings.
Oh, and to save you the trouble, I already tested and confirmed that using ajaxSetup() method in jQuery to set "isLocal" property to "true" won't overcome the local restriction in IE.
I just managed to make respond.js run on IE8 for media queries support , by running on localhost. If simply the html file opened, it does not help.
In the bootstrap application, what layout best suit both mobile and browser user interface? fixed-width layout or fluid-width layout? Do I need explicitly define the css media query styles for both design?
You may use Bootstrap's responsive deisgn by which your website will automatically adjust itself in order to give users a comfortable experience for whatever size device they’re using..
For it's application you need to include meta viewport tag under your <head>..</head> tags in addition to including Bootstrap’s responsive stylesheet
<head>
..
<meta name="viewport" content="width=device-width, initial-scale=1.0">
..
<link rel="stylesheet" href="responsive.css" />
..
</head>
You may check further details here and also this article
So, If you have correctly setup your page with containers, rows, and spans, Bootstrap will automatically adjust the layout for each device you are viewing the website on..