So I'm working on a project for school and want to include fontawesome-icons. My problem is that no icon, no matter which one I use, does show up. I tried it in an empty html-file with just a blank page and in that case it works. Can someone tell me why it doesn't show up in the image below? Thanks in advance!
Code of my website
...
<head>
<script src="https://kit.fontawesome.com/505871b650.js" crossorigin="anonymous"></script>
</head>
...
If you want things to be simple just put the following inside you <head> tag:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" crossorigin="anonymous">
And you don't need to use <script> tag to integrate fontawesome, take a look a this doc.
Related
I am currently trying to figure out why my dialog boxes are not working. I took code directly from jQuery UI and put it into my own new file too see if I could troubleshoot the problem, but the code from the website doesn't even work correctly when I copy and paste it into a new HTML file. The code in question (directly from jQuery UI):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
It is supposed to be simple and straightforward but it is driving me crazy at the moment. Any help fixing this would be fantastic.
I just tried the code on codepen and it works fine
But when I tried it on my computer, the css format did not appear in front of me, due to a simple reason
Focus on the following code
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
As you can see, there is only // without https:, so to solve the problem, we just add this https: to the format, so the format becomes as follows:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
The problem is solved, of course, if this is your problem, but if it is not, please explain the problem more with an example of a picture
I try to use the highlight.js but it didn't work
i work like they say in the website but i don't know what's wrong
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div>
<pre>
<code class="javascript">
var D = new Date();
</code>
</pre>
</div>
</body>
</html>
I expect the code in the pre tag to display properly but it will only display as a regular text. Please help me !
Or someone can use another way to help me show the code the way stackoverflow displays.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
check the difference here, you are missing https: in the cdn url. I have changed it and it works fine.
I am very tired and trying this from many hours and it won't work, then I added https: before css and js cdn and it worked like a charm.
monokai working cds are given below
css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css">
js
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
highlight js
<script>hljs.initHighlightingOnLoad();</script>
I am really basic at HTML/CSS but with the help from this website I managed to get the following working. The colour looks right, so its all working.
But when I put this in the HTML Source Editor in Moodle the colour disappears, so I know that its a HTML editor and the colour is contained in style as CSS. So i guess I need to link to a style sheet to give me that colour, but I have no idea how to do that. Or maybe I am wrong about that, and something else could be done.
I already checked W3 Schools, and its most likely I just don't have the jargon yet to properly look for the answer to this problem, so a google search when you simply don't have the vocab for what exactly I am looking for is difficult.
Please if you can help that's great, but I also want to better know what it is I should be looking at, as I am only doing this for Moodle, any places you can point me to where I can find or see how HTML/CSS works with Moodle so I can learn about it so I can slowly build up my own knowledge. I greatly appreciate this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#009999;
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
I will answer to you , first you put style css in same file of html ,so remove the whole link of style . then in style write like this
I advise to you use Adobe Dreamweaver program , I hope my answer solve your problem.
I'm creating an interface using Bootstrap and CSS,but when I run this page without including the project in nodejs program the page appears very well but when I include the bootstrap folder in nodejs program,some icons didn't appear such as the logout icon and login icon(I got a recatngle in place of the suitable icon).Does any one know what is the problem??
Are you using font awsome for the icons? if so have you included those in you code ie,the following code into the head section of your site's HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">?
I added this two tag to the header:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I have 3 different links on my homepage. I am trying to have each link go to a page that looks something like this:
<link rel="stylesheet" href="/assets/common/temlate1.css">
</head>
<body>
<div ng-include="'/assets/common/template1.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template1.js" type="text/javascript"></script>
</body>
I need each link on homepage to have different css, html and js files associated with it. For example:
If I click link 1: the file will look like the one above. If I click link 2, the file will look like this:
<link rel="stylesheet" href="/assets/common/temlate2.css">
</head>
<body>
<div ng-include="'/assets/common/template2.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template2.js" type="text/javascript"></script>
</body>
And the third link will have the files:
template3.css
template3.html
template3.js
What is the best way to accomplish what I want. I do NOT want to include all css and js files together. What I mean is I do not want to have this at the bottom of my file: The same is true for the css files.
<script src="/assets/common/template1.js" type="text/javascript"></script>
<script src="/assets/common/template2.js" type="text/javascript"></script>
<script src="/assets/common/template3.js" type="text/javascript"></script>
I am only showing you a small portion of the website so that this question is easy to understand. I have a lot of other links in the head section and a lot of js links above the body tag. All of these are common to all 3 templates. Therefore, I would like to use the same file and just replace the 3 areas mentioned above.
How do I accomplish this? I am hoping for a solution in angular. Maybe someone can point me in the right direction.
I think you'll have to define different modules within AngularJS to accomplish this. They can each have their own template.
So in short:
angular.module('page1');
angular.module('page2');
angular.module('page3');
They can all have their own templates, respectively page1.html, page2.html, and so on ...
This looks like a good explanation: https://docs.angularjs.org/guide/module