I am completely new to Digital Ocean. I have a Ubuntu droplet set up on digital ocean and am able to access my index.html file on port 80. My app is set up as a single page application using angular routing.
It loads the navbar and seems to be loading bootstrap...but both angular and my own css file are not loading. I initially thought it was a problem with my bower installing angular dependencies, but even just my local css file is not being attached. My css file is included with:
<link rel="stylesheet" href="css/style.css" type="text/css"/>
For some reason bootstrap seems to be working though:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Any tips or suggestions on what the problem might be? I'm completely lost.
The hrefs in all your links are set up to work in your local environment, but not on digital ocean. Bootstrap works because you are linking to an external url on a CDN.
You'll have to work through all the relative links in your hrefs. There are numerous approaches to this, including embedding the entire server path.
I'm not certain but it might be enough to replace href="css/style.css" with href="/css/style.css" to get a root relative path.
You should first load your styles to Digital Ocean and link to them.
Here - href="css/style.css" - you use local path, which you have to replace with a URL of file on virtual machine.
Related
When I provide cnd link:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
Then its showing icons and working fine.
Here is code jsfiddle
When I copy and host the same css file locally then its not working
Here is example jsfiddle code
Why its not working when I host locally? Is there any restrictions or license problem?
Thanks
I guess you are using a CDN network instead of Font Awesome's kit code. If that's the case, I'd recommend you using the Kit code of your kit. That'll help you in showing icon on your site, locally or hosted doesn't matter.
The fix I found is to save this css file locally and edit it. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
Find url and replace ../ to ../../ because my web font folder location was assets/webfonts not root
I have got a website built in CakePHP and hosted on http://thecontrolist.azurewebsites.net. I am using git to update this website. I am using Coco theme which uses Fontello, Font-Awesome and a few other to create CSS icons in admin panel. When I pushed my work first time, the font's wont show on the live server however they show fine on my localhost/wamp server.
I thought there would have been some kind of file corruption while pushing font files through git. Hence I decided to upload font files in Fontello and Font-awesome using FTP. I hard refreshed and it worked. However, after some time it again stopped working.
I add the entire libs directory of the theme to gitignore list and uploaded all fonts in question using FTP once gitignore had been pushed. But it didn't fix the issue and fonts have stopped showing up again, so the gitignore didn't help. Any ideas what's going on?
Following the code:
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/fontello/css/fontello.css" />
And you can view the files from linked. One thing I am very sure about is that when I reupload files using FTP and refresh it works but then it stops working automatically after some time so it does not seem like a font filepath issue.
Just don't use buggy fonts. Use more stable fonts like font-awesome.
I built a web application using XAMPP.
If I access it on another device in the network, the stylesheet is not working:
<link rel="stylesheet" type="text/css" href="http://localhost/LeadCapt/Res/style.css">
I guess I must have other links, not localhost...But which ones?
Try using relative url links instead of absolute url links.
Alternatively copy paste the href of CSS in browser URL to check whether it exists and is available at the location.
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
Solution:
Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.
For more info:
URI starting with two slashes ... how do they behave?
Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ta-daa!
What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -
$python -m SimpleHTTPServer
Then, go to your browser and go to 127.0.0.1:8000
If it doesn't show up, try changing the homepage of your website to index.html
I am working on a remote instance using amazon ec2 instances and created an index.html file. In that HTML file, I have created links to an external CSS file which is in the same directory as my index.html file but when I try it out in chrome it doesn't seem to find the CSS file and gives me a 404 not found an error. I have tried doing the same thing on my local machine and it works just fine there. Am I missing something? How can I fix this issue? Any help is appreciated, thank you.
This is the part of the code i am confused with:
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" media="screen" href="signin.css">
</head>
Try the usual suspects:
1. Renaming your css file
2. Check if it works on you local machine. You've done that, so it's a server related issue.
3. Try absolute path for the css
4. Try other browsers, maybe it's just chrome