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.
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 configured an apache server with document root to public_html folder and i want to keep my css files in the above directory as following code
<head>
<meta charset="utf-8">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="../css/login_page.css">
</head>
Using above code i am not getting style changes related to css but if i keep my css file in public_html folder and change it to
<link rel="stylesheet" type="text/css" href="login_page.css">
there seems no problem. I want to know how to make the first code work.
Maybe it's about cache? Have you tried clear cahce and reload the page?
To me it seams impossible, the apache server can only send the file in your public_html.(for security reasons)
More that the server side, your browser will request a file that it's not in the domain.
The only solution it's to be in your public_html.
Edit:
The only files that you work with were are above are php files of config files, apache will never work with files that are above the public_html
It's not clear enough for me, but if your problem is that css file in browser doesn't update when you edit it, the solution is to disable cache for your site
In any browser: devtools -> network -> disable cache checkbox example image
you cannot reference files, folders outside your public_html folder. Hence the name of the folder. It's by design and it would be a BIG security risk if this would be possible.
I noticed recently that something is related to CSS3 and some DOM elements that kind of make ::before and ::after appear in the inspector window. I wonder why they appear there?
The sample is as follows:
Get a Local Copy of Bootstrap
If you can't access Bootstrap from the CDN, you'll need to pull it in via NuGet or your preferred package manager (npm, bower, etc.). This will download the files into your solution so that they don't require any external connections.
Additionally, you can download Bootstrap directly if you would prefer that approach.
Reference the Local File
Once you have it in your solution, you'll just need to reference it by location within the <head> section of your _Layout.cshtml file:
<!-- Point to the location within your solution that Bootstrap is stored -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
Or you can simply drag-drop it from your Solution Explorer :
If you are still encountering issues, consider checking the Developer Tools (F12) within your browser and clearing your cache to ensure the latest files are being pulled properly.
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.
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