Flaticon Icons from CDN stopped showing - html

They just stopped showing up randomly after a refresh. I got rid of all styling around the element and they are still not showing up. They also stopped showing up on a component I wasn't even working on. I checked on chrome and they were showing up, but then after a few refreshes (no changes, was just refreshing back and forth between browsers) they stopped appearing on chrome as well. I re-copied the CDN link from the website just to be sure and it still does not work.
I tried it on a starter file as well, not working on firefox or chrome:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
</head>
<body>
<i class='fi fi-rr-angle-left'></i>
</body>
</html>

Related

Chrome is downloading HTML files instead of displaying them

I need some help. I decided to create a home FTP server for my family. I hit a roadblock a few hours ago. When I was creating my home page, I wanted to test it in Chrome. I linked a css file to it aswell. I expected to see the test webpage, which was a h1 with the text hello. What actually happened was the fact that it downloaded my html file, and when I opened that in Chrome, I saw my page without the css. I've tried everything to speak of on this site and I even checked page 2 of Google. Here's my code, I'm running FTP on IIS 10.
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
As far as I know, chrome download the html page is right. Since you use chrome to access a ftp file, it is not a http connection to the server. The chrome will not directly show it.
If you want to show the html page in the browser, you should use IIS website instead of ftp site.
More details about how to create a IIS web site, you could refer to below article.
https://support.microsoft.com/en-sg/help/323972/how-to-set-up-your-first-iis-web-site
i guess you are putting it in a wrong format
as https://www.w3schools.com/css/css_howto.asp says
<link rel="stylesheet" type="text/css" href="mystyle.css">

Twitter timeline is not loading

The twitter timeline is not shown properly in the web browser even though it is the original code from the twitter publish website.
At first the timeline was shown as it should. Somehow after I refreshed the site with F5 it didn't work at all. Somehow at the X time I refreshed it worked. When I restarted my computer and wanted to work on the file again it didn't work. I'm not an expert on HTML but I think the problem may be in the script tag.
I looked up other questions here on stackoverflow but none of them helped me. My code had no problems before I tried out without the timeline.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/ErinCorleyGray/lists/stackers?ref_src=twsrc%5Etfw">A Twitter List by ErinCorleyGray</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
A timeline of the twitter list should be displayed instead I get only the text: "A twitter list by ..."
I just pasted your code onto a new html document and viewed it on my Chrome browser and I did not have an issue with viewing the timeline. I have attached a screenshot of what I see. Maybe it is a browser issue? screenshot of the top of the page

Favicon does not shows up in google chrome

I have a website which i tested on 3 browsers IE,Firefox and Chrome, my favicon doesn't seems to show up in chrome but it does shows in other browsers. I have tried clearing cache of chrome multiple times but doesn't seems to be helping though.
Can you please suggest me some way to fix this .
Make sure you don't have any body-related markup (eg. a div) in your head, before the favicon declarations. For example:
<html>
<head>
<title>My page</title>
<div>stuff</div> <?-- This div has nothing to do here -->
<link rel="icon" href="/favicon.ico">
</head>
<body>...</body>
</html>
The reason is: as soon as Chrome encounters a markup it is not supposed to find in the header (div, p...), it considers the header to be over. Therefore, all following markups, which do not make any sense in the body, are ignored. This is the case of the link markup you probably use for the favicon.
This behavior is specific to Chrome. That would explain why you get this bug only with this browser.
Open your icon url in new tab and press ctrl + F5
To get icon url go to view-source by ctrl + U and you well get href click on that url.
<link rel="shortcut icon" href="//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6">

Save Complete Website - Background Images not showing

When I click Save As in Firefox, Chrome, or IE, then choose "Webpage, Complete" from the save as menu, it does not appear to be saving the background images defined in my CSS. Am I doing something wrong? Here is a sample problem:
test.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link href="test.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<div id="test"></div>
</body>
</html>
test.css
#test {
width: 400px;
height: 400px;
background: url(img/bg.jpg)
}
By default browsers won't download images set in css.
You can do this in Firefox:
Right click -> View page info -> select media tab -> highlight all the files -> save as...
Recently I've been testing saving the complete HTML web page with background images across various browsers and only Opera 12 was able to save the complete website as seen online. Just open the desired website, click Ctrl+S and choose to save a complete website.
The only solution who worked for me is to save the page as MHT with the plugin unMHT (for firefox) :
https://addons.mozilla.org/fr/firefox/addon/unmht/
Even webfonts are dowloaded !!
MHT can be opened in IE & Chrome (and firefox but only with this extention).
I know this solution is not perfect but this is the better I found...

Facebook Like Button not working in IE

I am having trouble getting consistent behaviour from my Facebook Like button. I have created this example which I believe to be the simplest possible implementation...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Untitled Page</title>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
</head>
<body>
<fb:like href="http://www.stackoverflow.com" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</body>
</html>
I have saved this as an HTML file which I am serving from a webserver running on my machine (localhost - I assume this won't be a problem as the page I'm 'liking' in this example is public-facing).
If I try this in Google Chrome, it appears to work without a problem.
When I try it in IE9, the like button renders, but when I click it, a new IE window opens which is mostly blank apart from a blue Facebook header. The URL of this page is: http://www.facebook.com/connect/connect_to_external_page_widget_loggedin.php?social_plugin=like&external_page_url=http%3A%2F%2Fwww.stackoverflow.com%2F
This is really confusing me as the example is about as simple as it gets! Any help would be really appreciated!
EDIT: A little more information. If I go to Facebook in IE9 and log-out, then try my like button again, a new window still opens but this time I can login. After logging in, though, I still get taken to the same blank page.
In desperation, I tried accessing my local page from http://127.0.0.1 instead of http://localhost
This appears to have solved (or at least worked around) the problem.
I would love to hear from anyone who can explain what this is all about!!