I think a lot of you know about twitter-bootstrap which makes it so easy to design "pretty" websites. I'm recently developing a JSF web application in Netbeans.
Everything except of the glyphicons.
In the header part of your website you will include bootstrap via
<h:outputStylesheet library="css" name="bootstrap.min.css"></h:outputStylesheet>
if you use jsf or
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css"/>
if don't use jsf.
The weird think is that the glyphicons are empty squares like in this question:
Glyphicons rendering as empty box
I already checked with view-source with my browser and both rendered CSS have the same content.
<head id="j_idt2">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/WWHY/faces/javax.faces.resource/bootstrap.min.css?ln=css" />
<link type="text/css" rel="stylesheet" href="/WWHY/faces/javax.faces.resource/styles.css?ln=css" />
<title>WWHY IT Support Center</title>
<script src="resources/js/ie-emulation-modes-warning.js"></script>
</head>
Maybe you guys know why doesn't work for the glyphicons.
Thanks !
Most likely the same as with font-awesome. Check How to use Font Awesome from webjars.org with JSF
Although in th FA case there already was a jsf specific css
Related
I'm pretty new to Vue/Vuetify, I've tried using the vuetify v-text-field tag with outline prop.
Why the label is like in the image?
Also the font seems not to be the Vuetify one.
My index.html:
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Wrap your App.vue in <v-app>. Among other things, it wraps the app in the v-application class which a lot of styles use as part of their selector. From the docs:
The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify’s components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be rendered within your application ONCE.
I have a Blazor WASM (Client) project, where I have a javascript file interop.js.
I copied this in the wwwroot folder and called this way in the _Host.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Client</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<script src="~/interop.js"></script>
</head>
No matter what ever I do, the browser debugger window shows this warning message:
Failed to load resource: the server responded with a status of 404 (Not Found) Interop.js:1
Why would this be happening ?
Somebody please help !!!
Thank you
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Router Practice</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-todo doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
This is the code of my index.html file in the public folder.
There is also an icon file named favicon.ico.
But when I run my dev server, the favicon is not showed.
Please help me.
I have tried to change
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
to
<link rel="icon" href="/favicon.ico">
but it's not working either.
and when i type localhost:8080/favicon.ico, it is showing my favicon.
Also, there are correct HTML tags when I debug on chrome dev tool.
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Router Practice</title>
</head>
Expected result: favicon should be shown.
I have a same problem.. but I success to fix this, when I switch the double quote to simple quote in the attribute rel, but I don't know why..
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
replace with:
<link rel='icon' href="<%= BASE_URL %>favicon.ico">
If you're using PWA, check your public/img/icons folder too. And make sure that your favicon-16x16.png and favicon-32x32.png files are not the default ones.
And also best way to force cache is to hit the favicon address directly
http://yourwebsite.com/favicon.ico
and press control+f5 for windows/linux or shift+command+R for Mac. You will see it changes. Then navigate back to your webpage and it will be refreshed.
I had this issue and it seemed that Chrome was caching the favicon (was working on multiple projects at once).
So a clear of the cache and closing the browser tab and restart is what worked for me
In my case, I had also created the project as a PWA, hence I also needed to change all the relevant icons
I also had this issue on a PWA project but clearing my cache fixed it.
WAMP server loading index.html just fine but not loading any additional css style sheets and script files.
I've tried these
<link rel="stylesheet" href="wamp/www/AngularJS_Practice/css/style.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<link rel="stylesheet" href="css/style.css"/>
edit
My current index.html page is
<!DOCTYPE HTML>
<html lang='en'>
<head>
<title>Electronic Components</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2>Lorem Ipsum</h2>
</body>
</html>
edit 2
css
h2 {
color: orange;
font-style: italic;
}
Refresh your browser cache. Press 'Ctrl+F5'
That'll do the trick.
This worked for me:
<link rel="stylesheet" href=".\style.css">
You forgot to use type
<link rel="stylesheet" type="text/css" href="css/style.css">
Also note
<link ....> // this is right
<link ..../> // avoid this
Your HTML file seems right , try making this small css file in css folder and link to it
body{background-color:blue;}
Test this
I had a same issue and what worked for me is this
<link rel="stylesheet" type="text/css" href="./css/style.css">
Enjoy
select the full url from url bar and then press ENTER... It works! ;)
<head>
<meta name="description" content="Our description">
<meta name="keywords" content="our keywords">
<link rel="stylesheet" href="/IN/style.css" type="text/css">
</head
Becomes
<head>
<meta name="description" content="Our description">
<meta name="keywords" content="our keywords">
<link rel="stylesheet" href="/IN/style.css" type="text/css">
</link>
</meta>
</meta>
</head>
Multiplied by all the tags in the head it starts to get ridiculous. Making the tags self-closing prevents the behavior, but to the extent the behavior is common (this very site, arstechnica, theverge) I think there should be a workaround to disable the behavior. Is there?