-1

Edited, because the link to the "already answered solution" does not help.
See addition at the end of this question

Original question

I have two links to external style sheets in all my HTML pages. Therefore I want to put them in one external style sheet.

<!DOCTYPE html>
<html>
<head>
<title>Html Demo</title>
<link rel="stylesheet" type="text/css" href="mystyles.css">
<link rel="stylesheet"  href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" (etc)
...

This works fine. Index.Html shows some nice icons:

<p>
  <i class="fas fa-fish"></i>
  <i class="fas fa-frog"></i>
  <i class="fas fa-user-ninja vanished"></i>
  <i class="fab fa-facebook"></i>
</p>

However, I have to add the link to font-awesome to all my HTML pages.
I thought it would be a good Idea to move the reference to font awesome to MyStyles.css. What is the correct syntax?

Incorrect MyStyles.Css:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"  (etc)

body {background-color: lightblue;}
h1 {color: yellow; margin-left: 20px;}
... (etc)

What is the correct syntax?

Addition

This question seems to be already answered here In the answer it says:

@import url("base.css");

I like it that the asnwer is so easy. All I have to do was to move the original link to the CSS.

The original (functioning) text in index.html was:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Note: after the reference to the imported CSS file are some parameters!

Several tries in `mystyles.css, similar to the answered question, alas none of them worked:

(1) Only import the css file. But where to put the extra parameters?

@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css");

(2) Put everything inside the url statement:

@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous")

(3) Put the parameters after the closing bracket:

@import url ("https://use.fontawesome.com/releases/v5.7.2/css/all.css") integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"

(4) The original import statement in the references answer tries to put it into double quotes, one of the answers here suggests to put it in single quotes:

@import url ('https://use.fontawesome.com/releases/v5.7.2/css/all.css') integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"

(5) W3Schools suggests not to use brackets at all:

@import url "https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"

So: anybody knows the correct syntax?

Community
  • 1
  • 1
Harald Coppoolse
  • 28,834
  • 7
  • 67
  • 116

1 Answers1

0

Use @import url like

@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');
Freddy
  • 4,548
  • 1
  • 7
  • 17
  • Thank you. Do you know where I should put the extra parameters after `http...all.css`. So where to put the parts `integrity="sha384-..." crossorigin = "anonymous"` – Harald Coppoolse Feb 25 '19 at 10:19
  • 1
    That doesn't work with @import. See [Subresource Integrity when using @import](https://stackoverflow.com/questions/52300118/subresource-integrity-when-using-import) – Freddy Feb 25 '19 at 10:25