This is my first time working in serious web dev and using Foundation.
**
Questions:
**
1) Can I add text/scss to my MIME types? I am using the Mac terminal looking at apache's MIME types and don't see any reference to scss or sass extensions
2) Why would my styles not be applied at all?
3) Not a priority but if anybody has the answer, how do I customize Foundation sites beyond the default styling?
**
Explanation:
**
I am not doing anything fancy, just trying to style my webpage and learning Sassy CSS. I tried to customize the _.settings.scss file given in the foundation setup but the changes weren't loading and now it doesn't even use the default styling. In the Chrome dev tools I see no styles applied or referenced and the page looks like simple HTML.
I am getting the following errors: in Dev tools for Chrome
Refused to apply style from 'http://localhost:63342/MMM/scss/app.scss'
because its MIME type ('application/octet-stream') is not a supported
stylesheet MIME type, and strict MIME checking is enabled.
2news-magazine.html:1
Refused to apply style from '..../foundation/scss/foundation.scss'
because its MIME type ('application/octet-stream') is not a supported
stylesheet MIME type, and strict MIME checking is enabled.
news-magazine.html:1
Refused to apply style from 'http://localhost:63342/MMM/scss/app.scss'
because its MIME type ('application/octet-stream') is not a supported
stylesheet MIME type, and strict MIME checking is enabled.
HTML:
<title>MMM</title>
<link rel="stylesheet"
href="./bower_components/foundation/scss/foundation.scss" />
<link rel="stylesheet" href="./scss/app.scss" />
<link rel="stylesheet" type="text/css="
href="./bower_components/foundation/css/foundation.min.css" />
<link rel="stylesheet" type="text/css="
href="./bower_components/foundation/css/foundation-icons.css" />
<script src="./bower_components/jquery/dist/jquery.js" ></script>
<script src="./bower_components/modernizr/modernizr.js"></script>
<link rel="stylesheet" type="text/css" href="./bower_components/font-
awesome/web-fonts-with-css/css/fontawesome.min.css"/>
<script
src="./bower_components/foundation/js/foundation/foundation.js"> .
</script>
<script src="./bower_components/foundation/js/
foundation/foundation.equalizer.js">
</script>
</head>
**
**Settings File **
$include-html-panel-classes: $include-html-classes;
// We use these to control the background and border styles
$panel-bg: scale-color(#FFFFFF, $lightness: -5%);
$panel-border-style: solid;
$panel-border-size: 1px;
$callout-panel-bg: scale-color($primary-color, $lightness: 94%);
//// We use this % to control how much we darken things on hover
$panel-border-color: scale-color($panel-bg, $lightness: -11%);
//// We use these to set default inner padding and bottom margin
$panel-margin-bottom: rem-calc(20);
$panel-padding: rem-calc(20);
//// We use these to set default font colors
$panel-font-color: #FF3548;
$panel-font-color-alt: $white;
$panel-header-adjust: true;
$callout-panel-link-color: #000000;
$callout-panel-link-color-hover: scale-color($callout-panel-link-color,
$lightness: -14%);
Thank you for your help in advance. Please let me know if I need to include anything else.
Sass is not a clientside solution and you need some Sass / SCSS compiler and then have to use the generated css files.
Also 3 questions in one are two too much.
Here are some tools:
https://getcrunch.co/
http://koala-app.com/
https://prepros.io/
And IDEs like VSCode can also compile (using extensions).
I have the following code with a simple working Vue.js application. But the vue.js devtools is not responding. It was working well a few days ago, now it's not working anymore what could possibly be going wrong? when I go to https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd, it says it is already added.
<!doctype html>
<html lang="en">
<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">
<script src="https://unpkg.com/vue#2.1.6/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div id="application">
<input type="text" v-model="message">
<p>The value of the input is: {{ message }}</p>
</div>
</div>
<script>
let data = {
message: 'Hello World'
}
new Vue({
el: '#application',
data: data
})
</script>
</body>
</html>
One alternative is to set up a local web server, as the OP already stated.
The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.
Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.
Sources:
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
I tried all of the ways presented in answers here, but none of them worked for me (neither for chrome nor for firefox).
Finally I found an answer: If you still have this problem, you can try to uninstall the current version of Vue extension and install beta version: https://v3-migration.vuejs.org/breaking-changes/introduction.html#devtools-extension
Remember to restart your browser afterwards.
UPDATE: 2021 May 30,
If you are using Vue 3, old dev tools versions won't work, so just use the new beta version.
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
To solve this, simply go to chrome://extensions/, scroll down to the Vue.js devtools and enable the "Allow Access to file URLs" by clicking on its checkbox.
Source: https://github.com/vuejs/vue-devtools/issues/236
Had the same issue and solved it by adding
Vue.config.devtools = true;
after Vue.js import script, then take look at chrome devtools. You will see a tab called Vue to inspect your vue instance.
reference: https://v2.vuejs.org/v2/api/#devtools
I found out the answer, I was viewing a plain html file on my computer which was making the vue.js tool not load. I loaded up my local xampp server and ran the application from the local machine server url again and now vue.js devtools is working! :)
Also you can disable with Vue config:
https://v2.vuejs.org/v2/api/#devtools
in the extensions folder in chrome browser, under the details tab in vue devtools extension, check the box having allow access to file URLs,
this worked for me..
If you're using Vue 3 and experiencing this issue, try installing the beta version of the Vue Devtools. It may help until the stable version gets the major refactor.
I had the same issue & solved it by:
Installing this extension Vue Dev Tools Beta Chrome Extention
Reloading the chrome browser.
i had this problem, and i was expecting the vue-devtools to work by just including it. i had it console log the version
console.log("Vue Version " +Vue.version );
but this didnt work to actually load an instance of vue.
took me a few minutes, but once i actually created a vue instance, then it worked. this was the hello world example that made the devtools work :)
let data = {
message: 'Hello World'
}
new Vue({
el: '#application',
data: data
})
I solved the same problem.
But in my case Vue.js Chrome Devtools didn't detect Vue.js because in html file was <script src="https://unpkg.com/vue"/>
I replaced it to <script src="https://unpkg.com/vue"></script>
Now Chrome Devtools is detecting Vue.js perfectly.
Thanks for exapmle above.I use vue#2.4.4 and open my html by file://
In the case of Firefox, install the beta version of vue-devtools, which supports Vue 3.
If you have already turned on Allow Access to file URLs in chrome://extensions/ -> Vue Devtools and it still does not work, try reinstall the Vue Devtools, might work for you.
check if vuejs app is not embedded in an iframe such as in a storybook app.
the hack in such a case is to work outside the parent frame working directly on the url of your iframe and the vue devtools should work fine.
I'm using Vue in electron and I have the electron main "app" separated Vue's "app".
When in the the debugger console, typing Vue was giving the error Uncaught ReferenceError: Vue is not defined
Here was my fix
window.vue = new Vue({
components: {
App,
Login,
},
router,
store,
template: '<App/>',
}).$mount('#app');
The work-around was assigning window.Vue so the devtool could find it.
The same problem here, and I've solved it.
If you are developing in the localhost environment and using Chrome Dev Tools then you need to give permission for the Vue.js extension to access the local files on your computer.
Config your Vue.js tool in Chrome extensions
Search for "Vue.js devtools"
Click on details
Check the "Allow access to file URLs" checkbox
In my case I just had compiled for production npm run prod - which was the issue. As I ran in dev npm run dev, it started recognizing Vue.
I downloaded bootstrap 3.0 and can't get the glyphicons to work. I get some kind of "E003" error. Any ideas why this is happening? I tried both locally and online and I still get the same problem.
I was having the same issue and couldn't find any information about it except in the hidden comments on this page. My font files were loading just fine according to Chrome, but the icons weren't displaying properly. I'm making this an answer so it will hopefully help others.
Something was wrong with the font files that I downloaded from Bootstrap 3's customizer tool. To get the correct fonts, go to the Bootstrap homepage and download the full .zip file. Extract the four font files from there to your fonts directory and everything should work.
Note to readers: be sure to read #user2261073's comment and #Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.
The font file isn't being loaded correctly. Check if the files are in their expected location.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:
In my case I was getting a 404 for glyphicons-halflings-regular.woff, and non visible glyphicons on mobile browsers.
Looks like there is some confusion about the MIME type for woff, more than one MIME type being accepted by different browsers, but the W3C says:
application/font-woff
Edit: After testing the following MIME type for woff works on all browsers currently:
application/x-font-woff
Edit: Latest version of Bootstrap at this time (3.3.5) uses .woff2 fonts with the same initial result as .woff, the W3C still defining the spec but at the moment the MIME type seems to be:
application/font-woff2
-If you followed the highest rated answer and it's still not working:
The Font folder MUST be on the same level as your CSS folder. Fixing the path in bootstrap.css will not work.
Bootstrap.css has to navigate to the Fonts folder exactly like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
If the other solutions aren't working, you may want to try importing Glyphicons from an external source, rather than relying on Bootstrap to do everything for you. To do this:
You can either do this in HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Or CSS:
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")
Credit to edsiofi from this thread: Bootstrap 3 Glyphicons CDN
In case someone else ended up here and using Bootstrap >= v4.0: glyphicon support is dropped
The relevant part from the release notes:
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Octicons
Font Awesome
Source: https://v4-alpha.getbootstrap.com/migration/#components
If you want to use glyphicons you need to download it separately.
I personally tried Font Awesome and it is quite good. Adding icons is similar to glypicon way:
<i class="fas fa-chess"></i>
I was looking through this old question of mine and since what was supposed to be the correct answer up until now, was given by me in the comments, I think I also deserve the credit for it.
The problem lied in the fact that the glyphicon font files downloaded from bootstrap's customizer tool were not the same with the ones that are downloaded from the redirection found at bootstrap's homepage. The ones that are working as they should are the ones that can be downloaded from the following link:
http://getbootstrap.com/getting-started/#download
Anyone having problems with old bad customizer files should overwrite the fonts from the link above.
You can add this line of code and done.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Thanks.
Azure Websites are missing woff MIME configuration. You must add following entry into web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
</configuration>
As #Stijn described, the default location in Bootstrap.css is incorrect when installing this package from Nuget.
Change this section to look like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('Content/fonts/glyphicons-halflings-regular.eot');
src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
IIS will not server .woff files by default, so in IIS you'll need to add a <mimeMap> entry to your web.config file;
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
</staticContent>
</system.webServer>
</configuration>
Do you have all below files in your fonts directory
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
I modified my less variables.less file
I modified the variable
#icon-font-path: "fonts/";
the original was
#icon-font-path: "../fonts/";
It was causing a problem
This is due to wrong coding in bootstrap.css and bootstrap.min.css. When you download Bootstrap 3.0 from the Customizer the following code is missing:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Since this is the main code for using Glyphicons, it won't work ofc...
Download the css-files from the full package and this code will be implemented.
This was the reason, why the icons didn't show up for me:
* {
arial, sans-serif !important;
}
After i have removed this part of my CSS, everything worked like it should. The !important was the one causing trouble.
Another problem/solution may be having this Bootstrap 2.x code:
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
and when migrating based on the guide (.icon-* ---> .glyphicon .glyphicon-*):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>
you forget to add the icon class (containing the font reference):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
Below is what fixed it for me. I was getting "bad URI" error using in Firebug console. The icons were showing up as E### numbers. I had to add a .htaccess file in my 'fonts' directory.
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Possible duplicate of: Downloadable font on firefox: bad URI or cross-site access not allowed
This is very much a long shoot, but it was my case and since it is not here already.
If you are compiling Twitter Bootstrap from SASS using gulp-sass or grunt-sass ie. node-sass. Make sure your node modules are up to date, especially if your are working on a rather old project.
It turns out that as of some time back the SASS directive #at-root is used in the definition of the #font-face in glyphicons, see https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss.
The gotcha here is that node-sass ie. libsass do not support the #at-root directive if it is too old. If this is the case you will get a #font-face wrapped in a #at-root which the browser have no idea what to do with. The result of this is that no font will be downloaded and you will likely see garbage instead of icons.
Note: below is likely a niche scenario, but I wanted to share it in case someone else might find it useful.
In a rails project, we are reusing quite a bit through a gem that is a Rails engine using bootstrap-sass. All was well in the main project with the exception of the glyphicon font path resolution.
GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found)
We found that $bootstrap-sass-asset-helper was false during the resolution when we expected it to be true, so the path was different.
We caused the $bootstrap-sass-asset-helper to be initialized in the engine gem by doing:
// explicit sprockets import to get glyphicon font paths correct
#import 'bootstrap-sprockets';
#import "bootstrap/variables";
e.g. this caused the path to resolve to:
/assets/bootstrap/glyphicons-halflings-regular.woff
Again, this shouldn't be necessary in any normal rails project using bootstrap-sass, we just happen to be reusing a lot of views and this worked out for us. Hopefully this can assist someone else.
Here is what official documentation says regarding fonts not rendering.
Changing the icon font location
Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
Change the #icon-font-path and/or #icon-font-name variables in the source Less files.
Utilize the relative URLs option provided by the Less compiler.
Change the url() paths in the compiled CSS.
Use whatever option best suits your specific development setup.
Other than that it could be that you missed to copy the fonts folder to the root directory
I had this problem and it was caused by the variables.less file. Overriding it to set the icon-font-path value solved the problem.
The file structured looks like this:
\Content
\Bootstrap
\Fonts
styles.less
variables.less
Adding my own variables.less file in the root of Content and referencing this in styles.less resolved the 404 error.
Variables.less contains:
#icon-font-path: "fonts/";
I got Bootstrap from NuGet. When I published my site the glyphs didn't work.
In my case I got it working by setting the Build Action for each of the font files to 'Content' and set them to 'Copy Always'.
i had a box width code \e094 for glyphicon-arrow-down, in fact i solved the problem adding glyphicon in css class like that :
<i class="glyphicon glyphicon-arrow-down"></i>
if it could help someone ...
Make sure you aren't over specifying the font family, for example
*{font-family: Verdana;}
will remove the halflings font from i elements.
I was having the same problem where the browser was unable to find the font files, and my issue was due to exclusions in my .htaccess file that was whitelisting files that shouldn't be sent to index.php for processing. As the font file couldn't be loaded the characters were replaced with BLOB.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
As you can see, files like images, rss, and xml are excluded from the rewrite, but the font files are .woff and .woff2 files, so these also needed adding to the whitelist.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
Adding woff and woff2 to the whitelist allows the font files to be loaded, and the glyphicons should then display properly.
You must to set by this order:
<link rel="stylesheet" href="path/bootstrap.min.css">
<style type="text/css">
#font-face { font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }
</style>
What worked for me was replacing routes from:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
to
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
This is how you include the icon in bootstrap 3
<span class="glyphicon glyphicon-bell"></span>
http://glyphicons.bootstrapcheatsheets.com/
Hope that helps.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}
I am using bootstrap with namespace and glyphicons not working but after adding above line in code glyphicons working fine.
I just renamed the font from bootstrap.css using Ctrl+c, Ctrl+v and it worked.
I am quite new to dojo world.
Using dojo with google's CDN is well and Fine. But while using dijit just dojo.require() does not work. Where can I find the default CSS Themes from CDN ??
and another question out of quorisity:
Would the the CSS configuration for dijit work for dojox too ??
The CSS can be found on Google's CDN. I've used it in a page or two. Here's some CSS link tags.
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
Much like the libraries, you can pick a more or less specific version in the URL, so this will grab the latest in the 1.4.x chain.
UPDATED [19/May/2016]:-
Update version - 1.10.4
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
Here is 1.9.1.
Theme Tester: Claro, Tundra, Nihilo, and Soria
Claro - http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css
Tundra - http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/tundra/tundra.css
Nihilo - http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/nihilo/nihilo.css
Soria - http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/soria/soria.css
Here is 1.10.4.
Theme Tester: Claro, Tundra, Nihilo, Soria
Claro https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css
Tundra https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css
Nihilo https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/nihilo/nihilo.css
Soria https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/soria/soria.css
Well, As we know 1.11.2 version also has been released so below are the cdn links for that-
Claro: https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css
Tundra: https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/tundra/tundra.css
Nihilo: https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/nihilo/nihilo.css
Soria: https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/soria/soria.css
Hoping this will help you :)