How to use Icon8 webicons in static HTML? - icons

I am trying to embed Icon8 SVG's in my code
This question relates to this website:
https://icons8.com/welovesvg
I linked to the CDN in the head:
<script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script>
And I put this in the HTML:
<webicon icon="material:account-box"/>hello</webicon>
But nothing is showing up...how can I make this work?
They also say to link to their website, as I did.
The file on my URL is at:
http://xuzo.com/icon8.html

Related

CSS not working locally in my computer

I'm using Bootstrap to develop a website and recently I asked here a question because some custom simple lines in CSS weren't working. I discovered that using development sites such as jsfiddle or codepen, the code works but I can't still get it working in my computer.
Do I need to install do something or install something? I thought it could be an issue of not using a web server, but I've just installed XAMPP and nothing...
In the end, I'm using XAMPP, with proper path xampp_path/etsit/index.html --> localhost/etsit/index.html. This doesn't work, there's no error in the cosole. When I just click in index.html to open it with the browser, it doesn't work either.
For bootstrap, I just add these links to the body (JUST FOR YOU TO KNOW I HAVEN'T DOWNLOADED BOOTSTRAP BUT I'M USING CDN):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
UPDATE
Sample in codepen and jsfiddle that work.
The original (it's the same code) you can find it in these other post I made.
UPDATE 2
Please, read the post entirely before editing my question and marking it as duplicate, not noticing that same question is mine and has been referenced twice in the post....
Based on your answers in the comments section, it seems as though you are not loading your CSS file. You've stated that you do indeed have a link to it in your in your code. So either a) that link is now gone (in which case you would not see it at all in your dev tools' network tab); or b) the link is incorrect (in which case you would be getting something like a 404 error in your network tab). Make sure the path to your CSS file is indeed correct and that it exists at the location that you are defining.

jQuery validation CSS to change font & text box colors stopped working

There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.

Will including these javascript files in the header eliminate Etag errors, and other SEO errors from YSlow?

I have been working on performance lately, and recently ran a YSlow test on my company's asp.net website. I have already set up an IIS7 rule to set expiration dates to 30 days. After researching, I think Yahoo suggests you add tags like this to your head section:
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js" ></script>
<script src="http://yui.yahooapis.com/2.9.0/build/get/get-min.js" ></script>
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script src="http://yui.yahooapis.com/2.9.0/build/imageloader/imageloader-min.js">
</script>
<script src="http://yui.yahooapis.com/2.9.0/build/cookie/cookie-min.js"></script>
If you see this link, Yahoo's recommendations on how to improve SEO, it seems as if yahoo suggests putting these .js files in your header.
Are these javascript files from yahoo something you should include in your head section? Or are they just unnecessary external .js files that will slow your site down? I just don't understand yahoo's logic behind this. Any guidance to clear this up would be greatly appreciated!
Those files are YUI version 2 (deprecated) YUI3 is the latest, if your website is not using any of these components then you're ok to remove them from HEAD section. If your website is indeed using those YUI2 files then you can get the combined version of all the links above in order to have only 1 script tag and move it to the bottom of your page next to .

JQuery function is not working after URL Rewriting

Refer to my this question: Page not redirecting properly, URL rewriting (Asp.NET)
Which is resolved except one thing.
Though I have put the code to eliminate post back for .jpg and other file extension, JQuery at the web page is not working.
<script type="text/javascript" src="JS/jquery.js"></script>
I have written it like the above. I have tried to change the path like
<script type="text/javascript" src="~/JS/jquery.js"></script>
but no luck.
Any suggestion
Try this.
<script type="text/javascript" src= "<%=ResolveUrl("~/JS/jquery.js")%>" ></script>
you first check if the string contains /web/
if (app.Request.RawUrl.ToLower().Contains("/web/"))
and your .js file doesn't contain /web/
so either put the js file in the web folder, or check for the string to contain /js/ as well...
if (app.Request.RawUrl.ToLower().Contains("/web/") || if (app.Request.RawUrl.ToLower().Contains("/js/")))

Insert a single HTML page as an article in Joomla

I have a landing page created as a single html file with an external css file and a bunch of jpeg images. It looks fine and everything is good with it. I need to insert this page as an article in Joomla so that it looked the same way as it does now, without broken styles and missing images. It should show all header, footer and sidebar content from Joomla and the landing page as a regular page. What is the right way to do that?
Create a blank template for joomla and paste the whole body of your landing page to a joomla article.
Alternately, if you are using a totally different stylesheet, you may have better luck if you turn it into a custom template. Joomla's templating model is tremendously simple and abnormally flexible!
Try this
place the css,scripts,images in the root folder of your website.
path could be
/css/style.css or for localhost /joomla/css/style.css
/scripts/script.js or for localhost /joomla/scripts/script.js
/images/image.jpg or for localhost /joomla/images/image.jpg
copy and paste your html code including the file paths in article editor.
this could be
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />//for css
<script type="text/javascript" src="/scripts/scripts.js"></script>//for javascript
<img src="/images/image.jpg" />//for images
use absolute paths for locating your files.
this is irrespective of templates

Resources