Calling an external css file is not having the same result when the same css is used as internal css

Question

If I take css script from this example W3Schools and I put it into 2 external css file (font.css and menu.css) and then I called them in html, the arrow from Dropdown menu disappear.

The content from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css is in font.css and the entire content of tag <style> is in menu.css.

I can't include web link because I don't have access to internet where I want to create this.

The code ended like this:

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="font.css" >
  <link rel="stylesheet" type="text/css" href="menu.css" >
</head>
<body>
  <!–– Rest of the code...-->
</body>

 </html>

Provide a minimal reproducible example. The css files you linked doesn't load here either, and if we can't see it, we can't fix it. — Asons
– Asons, Commented Apr 24, 2019 at 9:40
Did the css files load ? as in did you get a 200 status over network call ? — takrishna
– takrishna, Commented Apr 24, 2019 at 9:40
did you add the jquery? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> I mean this — xmaster
– xmaster, Commented Apr 24, 2019 at 9:40
Hi @Bob, the example you linked to on W3Schools uses Font Awesome as you can see in Dev Tools (<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> is included in the <head>). Make sure to add it if you want it to work ;) — Jake
– Jake, Commented Apr 24, 2019 at 9:41
@ I made a file called font.css with the script from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css I forgot to mention that I don't have access to internet. — BOB
– BOB, Commented Apr 24, 2019 at 9:43

Netlog · Accepted Answer · 2019-04-24 10:10:04Z

1

its not enough to copy content of https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css to your css file! since there is some linked fonts and images that directed by "Relational Path" in this case you have to use External CSS URL replaceing with your local css file means; replace

  <link rel="stylesheet" type="text/css" href="font.css" >

with

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

or if you want to use offline , you have to download FontAwesome toolkit from https://fontawesome.com/download and use it in your source code there is sample files in downloaded archive file...

answered Apr 24, 2019 at 10:10

Netlog

1351 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BOB Over a year ago

What file from archive do I need to include in my code?

Netlog Over a year ago

for using all features of this toolkit you have to copy all extracted folders beside your index.html or etc ... also you can place them inside a folder but the main needed folders are css,webfonts here is sample scenario; you have your own index.html file and placed css,webfonts beside it now you have to include following code inside your <head> tag: <link rel="stylesheet" href="css/all.css">

Collectives™ on Stack Overflow

Calling an external css file is not having the same result when the same css is used as internal css

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related