22

Imagine that I have a folder "Website" where my files for that website are stored, and another folder with fonts, and that the font folder has more folders for each font. My html and css file is directly on the website folder. My font-face-css file is on the /font folder.

I want to link my css file to my html file, so I do this: href="stylesheet.css"

I also want to link my font-face-css file to my html file, so what should I put inside href=""?

And I also want to link my fonts, which are in their own folder, which is also inside the font folder which is where the css file is to my font-face-css file, what should I put inside the src:?

 1 Website folder
    1.1 Fonts folder (/fonts)
       1.1.1 Font1 folder (/fonts/font1)
             1.1.1.1 ttf file (/font/font1/font1.ttf)
             1.1.1.2 svg file (/font/font1/font1.svg)
       1.1.2 Font2 folder (/fonts/font2)
             1.1.2.1 ttf file (/font/font1/font2.ttf)
             1.1.2.2 svg file (/font/font1/font2.svg)
    1.2 html file (file.html)
    1.3 css file  (file.css)
Improve this question

5 Answers 5

Reset to default
65

check this quick reminder of file path

Here is all you need to know about relative file paths:

  • Starting with "/" returns to the root directory and starts there
  • Starting with "../" moves one directory backwards and starts there
  • Starting with "../../" moves two directories backwards and starts there (and so on...)
  • To move forward, just start with the first subdirectory and keep moving forward
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Do you meed the www root or the file system root /
16

I dont get it clearly, do you want to link an external css as the structure of files you defined above? If yes then just use the link tag :

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

so basically for files that are under your website folder (folder containing your index) you directly call it. For each successive folder use the "/" for example in your case :

    <link rel="stylesheet" type="text/css" href="Fonts/Font1/file name">
    <link rel="stylesheet" type="text/css" href="Fonts/Font2/file name">
Improve this answer

2 Comments

I did this: <link type="text/css" rel="stylesheet" href="fonts/fontface.css"/> fontface.css is inside fonts which is inside website. It did not change my text font, although I assigned them on my .css file. What am I doing wrong?
did you apply the font to the text? or did you just import it and do nothing else?
2

I think what you want to do is 

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

Improve this answer

Comments

0 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
.tree-view-com ul li {
  position: relative;
  list-style: none;
}
.tree-view-com .tree-view-child > li{
  padding-bottom: 30px;
}
.tree-view-com .tree-view-child > li:last-of-type{
  padding-bottom: 0px;
}
 
.tree-view-com ul li a .c-icon {
  margin-right: 10px;
  position: relative;
  top: 2px;
}
.tree-view-com ul > li > ul {
  margin-top: 20px;
  position: relative;
}
.tree-view-com > ul > li:before {
  content: "";
  border-left: 1px dashed #ccc;
  position: absolute;
  height: calc(100% - 30px - 5px);
  z-index: 1;
  left: 8px;
  top: 30px;
}
.tree-view-com > ul > li > ul > li:before {
  content: "";
  border-top: 1px dashed #ccc;
  position: absolute;
  width: 25px;
  left: -32px;
  top: 12px;
}
<div class="tree-view-com">
    <ul class="tree-view-parent">
        <li>
            <a href=""><i class="fa fa-folder c-icon c-icon-list" aria-hidden="true"></i> folder</a>
            <ul class="tree-view-child">
                <li>
                    <a href="" class="document-title">
                        <i class="fa fa-folder c-icon" aria-hidden="true"></i>
                        sub folder 1
                    </a>
                </li>
                <li>
                    <a href="" class="document-title">
                        <i class="fa fa-folder c-icon" aria-hidden="true"></i>
                        sub folder 2
                    </a>
                </li>
                <li>
                    <a href="" class="document-title">
                        <i class="fa fa-folder c-icon" aria-hidden="true"></i>
                        sub folder 3
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Improve this answer

1 Comment

Code-only answers are generally frowned upon on this site. Could you please edit your answer to include some comments or explanation of your code? Explanations should answer questions like: What does it do? How does it do it? Where does it go? How does it solve OP's problem? See: How to anwser. Thanks!
0

Update for everyone who can't find answer for linking css to html when css is in different folder. You need just put .(dot) before everything in href. I have like this href="./public/css/styles.css", but main html index.html i have in main folder where is everything. That's how it works for me at least.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.