I'm trying to use font awesome for some icons, and am doing this by using the CDN.
I simply copied my font awesome embed code in the of my page, as instructed.
<script src="https://use.fontawesome.com/4c5806874b.js"></script>
But when I open the page, it tells my that webfontloader.js failed
Any ideas what goes wrong here?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Brighton Times</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" media="(max-width: 400px)"type="text/css" href="smallest-screens.css">
<script src="https://use.fontawesome.com/4c5806874b.js"></script>
</head>
If I understand this correctly, You're trying to use to load some fonts - try using the following link
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
if you want to see the output in HTML follow - i class and it should work.
Somewhere in your code, You have given a wrong path. ex:font-face url etc.
keep in mind,
<img src="Lanka.jpg"> <!-- Lanka.jpg is in the current folder -->
<img src="Asia/Lanka.jpg"> <!-- Lanka.jpg is in the Asia folder -->
<img src="/Asia/Lanka.jpg"> <!-- Asia folder is in root folder -->
<img src="../Lanka.jpg"> <!-- Lanka.jpg is in one folder up from current folder-->
Related
How can I set deployment path in Svelte?
I would like to use it on the webserver in different path like
https://example.com/somewhere-else/index.html
But now right after i run npm build, I must use it like:
https://example.com/index.html
It must be something in the rollup.config.js but I cannot find it out.
I imagine you are using the standard svelte template?
https://github.com/sveltejs/template
The bundles it creates are not restricted to a specific path. You just need to put them in the appropriate path and update the link and script tags in the index.html file appropriately:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'><!-- change this -->
<link rel='stylesheet' href='/global.css'><!-- change this -->
<link rel='stylesheet' href='/build/bundle.css'><!-- change this -->
<script defer src='/build/bundle.js'></script><!-- change this -->
</head>
<body>
</body>
</html>
Does this answer your question, or is your problem more complicated?
I downloaded a theme providing html, css3, js file
and I added the path as below source
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Porto - Responsive HTML5 Template 7.5.0</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Porto - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Theme CSS -->
<link rel="stylesheet" href="/static/css/theme.css">
<link rel="stylesheet" href="/static/css/theme-elements.css">
<link rel="stylesheet" href="/static/css/theme-blog.css">
<link rel="stylesheet" href="/static/css/theme-shop.css">
<!-- Current Page CSS -->
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/settings.css">
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/layers.css">
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/navigation.css">
<!-- Demo CSS -->
<!-- Skin CSS -->
<link rel="stylesheet" href="/static/css/skins/skin-corporate-5.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="/static/css/custom.css">
<!-- Head Libs -->
<script src="/static/vendor/modernizr/modernizr.min.js"></script>
It works well when I approach at first
However, when i move using router it doesn't run some css and JavaScript.
so I tried to add a javascript path on component file
<template>
<div role="main" class="main">
test
</div>
</template>
<script>
import "/static/js/theme.js"
</script>
When I try like this I can see this error
This dependency was not found:
* /static/js/theme.js in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/parents/Robot.vue
To install it, you can run: npm install --save /static/js/theme.js
is there the way to load whole index.html again? or another way to resolve this issue?
Instead of writing static in the index.html files path, use <%= BASE_URL %>.
For example instead of adding all css and script files with href="/static/vendor/modernizr/modernizr.min.js", write like this href="<%= BASE_URL %>/vendor/modernizr/modernizr.min.js"
I have a Spring boot app with a Thymeleaf template, that is supposed to load a css file and a javascript file.
The CSS file loads, but the Javascript file doesnt, it does not even try to get it from the server. There is no HTTP request for the Javascript, but the requests for the CSS are visible.
Where is my mistake?
I already tried putting the link for the javascript in the header next to the css but that made no difference.
My folder structure is as follows:
resources
-- static
---- bootstrap
------ css
---- js
Here the HTML:
<html xmlns:th="https://thymeleaf.org" lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Title</title>
<link rel="stylesheet" type="text/css" th:href="#{/bootstrap/css/bootstrap_custom.css}" />
</head>
<body class="d-flex flex-column h-100">
<script th:href="#{/js/main.js}" type="text/javascript"></script>
</body>
</html>
There is no error message, the tag for the javascript is simply ignored.
Your script end tag is incomplete. It should be:
<script th:src="#{/js/main.js}" type="text/javascript"></script>
The tag should read
<script th:src[...]>
instead of
<script th:href[...]>
I made a webpage that inputs user's feedback using a form. On successful submit I display a thank you message on the same page, for which I'm using javascript.
The code executes well when I put the javascript on the same page. However, when I tried to separate the script onto a file (in a test webserver), it stopped executing.
Can you please help?
Relevant codes are mentioned below:
Head Element
<head>
<meta charset="utf-8" />
<!-- For proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico" />
<title><?= htmlspecialchars($title) ?></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="../javascript/submit-logic.js"></script>
</head>
First 2-3 lines of the javascript function:
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
Detailed code (HTML, CSS, Javascript) can be found in my codepen (this is working as expected) : http://codepen.io/abbor123/pen/YGwVXg
Javascript folder is placed outside the Public folder and has 755 permission.
Edit 1:
File Tree Screenshot:
Console Error Screenshot: (submit-logic.js is the name of my javascript file. The URL mentioned on hovering over this link is: /javascript/submit-logic.js:1 )
The javascript code page is available at the following URL:
https://gist.github.com/abor123/3193eb399c3f973be453ae9a8fcc0ce5
Move your javascript folder into public_html. As Quentin commented, your server likely isn't set up to serve any files outside public_html.
Okay I am just throwing this out there. I have no knowlegde of PHP and little knowlegde of Javascript.
Is it possible to check an HTML file if header css/js links and body .js links exist?
And if yes: locate them and use them in a Gulp-task in the order they are added in the HTML file?
Example header:
<head>
<meta charset="utf-8">
<title>Website | Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="The Most Awesome" content="Website">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/barebone.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
Use those links in a Gulptask like:
gulp.task('css', function(){
gulp.src("*links in html*")
.pipe(concat('main.css'))
.pipe(prefix())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
.pipe(connect.reload());
});
I could just declare the links in the Gulp-task but I want the Gulpfile to be as generic as possible. I want to be able to just dump my files anywhere in the folder.