Reputation:
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)
Upvotes: 22
Views: 183480
Reputation: 1
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.
Upvotes: 0
Reputation: 11
<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>
Upvotes: 0
Reputation: 198
I think what you want to do is
<link rel="stylesheet" type="text/css" href="font/font-face/my-font-face.css">
Upvotes: 2
Reputation: 617
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">
Upvotes: 16
Reputation: 85653
check this quick reminder of file path
Here is all you need to know about relative file paths:
Upvotes: 65