I have the following folders structure in my MVC site:
-- Content -- Notebook -- css
-- Content -- Notebook -- fonts
Content is directly under the root for the site. In my css folder i have a file which has a relative path
url('../fonts/fontawesome-webfont.woff?v=4.0.3')
My bundle currently looks like:
bundles.Add(new StyleBundle("~/bundles/Content/Notebook/css").Include(
"~/Content/Notebook/css/animate.css",
"~/Content/Notebook/css/font.css",
"~/Content/Notebook/css/font-awesome.min.css",
"~/Content/Notebook/css/app.css"
));
This is rendered using
#Styles.Render("~/bundles/Content/Notebook/css")
this works for the css files, but the font file isn't loading, i see that it is looking for it here http://localhost/MySite/bundles/Content/fonts/fontawesome-webfont.woff?v=4.0.3
I saw that and then tried to change my bundle name to
~/Content/Notebook/css
thinking that would get the relative path to work also, if i remove the "bundles" from the name,
but doing that causes the css files not to load. Why wouldn't the css files load? If I had the word "bundles" back to the name it works again. Also any idea on how to get the fonts to load along with the bundle?
When you do this:
url('../fonts/fontawesome-webfont.woff?v=4.0.3')
you are referring to the fonts via a relative path. If you then put your CSS bundle at /bundles/Content/Notebook/css it will look in bundles/content/fonts since that's combination of your relative path and where the browser see your css-file.
A few possible options (either):
Change your bundle path:
bundles.Add(new StyleBundle("~/Content/Notebook/css") ...
(the reason your css files didn't load when you removed bundles was that you didn't change the name of the stylebundle)
and
#Styles.Render("~/Content/Notebook/css")
Reference your fonts with an absolute path:
url('/Content/notebook/fonts/fontawesome-webfont.woff?v=4.0.3')
Related
The css, js and image directories are in public directory. In turn, the public directory is inside of views (I don't know if it's a good practice to add public directory inside of views directory).
The css files and the js files(in the public directory) are working but only one of the images (that is, the logo at the navbar section) gets loaded on the browser whenever I start up the server, the remaining images are showing little icons in there respective positions. All the images are in the same directory and I linked all of them in the same manner. Why is it that only one is appearing on the browser?
I don't know if it's a good practice to add the public directory inside of views directory, but when I added both on same path with app.js, all the files in public stopped working. But I know I'm on the wrong track because of the following reasons:
No difference is observed whether
app.use(express.static("public"); is added to app.js``` (that is, the server file) or not. This means that that line of code is not working, still the cssandjs` files work in both cases.
Only one of the images is being displayed on the browser even if all are linked in the same way.
The word public appears in the source of each of the static files, omitting it stops all the static files from working.
App structure:
med,
webapp,
main,
views,
partials
footer.ejs
header.ejs
public
bootstrap
css
js
images
home.ejs
post.ejs
news.ejs
about.ejs
contact.ejs
app.js
package.json
I hope indentation will help here since I'm not allowed to post pics yet.
The images in home.ejs are
img src="../views/public/images/syringe-pill-capsule.jpg,
img src="../views/public/images/dna-1811955_1920.jpg",
img src="../views/public/images/lab-217043_1280.jpg".
the only one that is loading on the browser is the logo at the navbar section,in header.ejs. The link is img src="../public/images/wd.jpg"
The problem is that you are not passing the correct path to express.static. You need to change the root to the actual root, i.e.:
app.use(express.static("./path-to-views/public")
Then, you need to make sure to use the correct paths in your html, which will be as simple as:
src="/images/syringe-pill-capsule.jpg"
EDIT:
The root for express.static you were using is correct, i.e.
app.use(express.static("views")
But you need to adjust the paths in the images src attributes to the following absolute path:
src="/public/images/syringe-pill-capsule.jpg"
I'm creating a site based on AdminLTE (v 2.3.0), a open source control panel template that uses bootstrap (v 3.3.5).
When I load my page in Google Chrome (v 48.0.2564.97 m) and use the developer tool (F12) in sources I notice that my content folder has a subfolder called less.
It is like:
Content/
├──less/
| ├──...
| ├──table.less
| └──...
The "..." means other files.
But here's the deal: I don't have any those files in my server and this table.less is generating problem to me.
So I did a test. One by one I remove the js and css files that I had referenced.
I discovered that when I add the bootstrap.css file this folder with all files appears.
Now my questions are:
Why this is happened?
How can I avoid it?
And if I can't how can I make my css file has priority above the less files?
PS:
I asked the 3rd question because normally the last css file to be add has priority when some property is overloaded. But in my case my last file is site.css, this file has definitions for tables, but when I open the page the properties of table.less has priority above my file and this is causing me problems.
You probably have a file called bootstrap.min.css.map or bootstrap.css.map next to the bootstrap css file. It's function is to reference the original source files and line numbers in your browser's developer tool section for each directive coming from your css file. If it were not there, you would always see bootstrap.css line 1 next to each css directive, which would not be very informative, this way you see the actual source structure that generated the css. It's all virtual, the less files are not there.
The Font-Awesome docs do not mention anywhere that other files need to be downloaded and included within a project so why are the icons missing?
I know that the font files should be within the relative path so Font-Awesome can see them, I understand that, but with reference to other techniques like combining and minifying css files and JavaScripts, why is it that there will more HTTP requests to get the fonts?
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (fontawesome-webfont.woff, line 0)
You can see that they do state that you need to copy the entire directory onto your webserver.
http://fortawesome.github.io/Font-Awesome/get-started/
EASY: Default CSS
Use this method to get the default Font Awesome CSS.
Copy the entire font-awesome directory into your project.
So just including the CSS file in your header isn't going to do much, because as others have pointed out.. it's a font. Think of it like Wingdings, so that's a font file.
Then the CSS basically sets the classes as background images, using the content but written using the font.
Minifying can cause some disruption to the paths of your CSS files. Basically, you need to make sure things are being referenced correctly. But firstly, ensure that the font files are on your webserver, and the CSS file of font-awesome is pointing to the correct path.
The entire point of Font Awesome is that it provides icons in form of a font file. Usually that font file is in the correct spot in the right directory next to the CSS files. The CSS files are referencing those font files (because they have to, somehow).
If you're picking that folder structure apart and are serving the CSS file from a different location then you'll also need to take care that the relative references to the font files don't break.
Follow the steps on their website.
Download here.
So,
I have used bower to install bootstrap SASS files into my application.
I am using AngularJS and want to use my own directory structure instead of the default Content path defined by MVC.
So I have installed https://github.com/twbs/bootstrap-sass and in my core SASS file I have imported the bootstrap SASS like this:
#import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
everything loads in my application and the site is definitely using bootstrap, but whenever I try to use a glyphicon I just get a square instead of the icon. Looking in the console I can see that the path to the glyphicons is wrong. It is showing:
http://localhost:58859/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
but it should be
http://localhost:58859/assets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
Now I "could" edit the variables file and change this line:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
to something like this:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: "/assets/bootstrap-sass/assets/fonts";
but whenever someone loads my project from github and bower resolves bootstrap my changes to that file will be lost. I have noted in their documentation they talk about sprockets and mincer, but I have never used these so I have no idea what they are for.
My question is, can I change the font path without editing the SASS file directly?
I have a rails app with many partials for one view, each partial is a section in the view (one paged website).
I have put all my assets in the correct places etc.
below is a screenshot of how the actual page should look (outside of rails) (header, then section one which you can see, and there are sections below etc).
However this is how it is showing when done in rails
No images are shown for some reason, nor any content.
When I do not include the style sheet, all the content (writing) shows fine. When I include the stylesheet, everything disappears, its all white. However there are content there because I am able to scroll up/down.
Below is a screenshot of the structure of my files
I basically have all my images inside the image folder, but there are subfolders inside the image folders.
so:
assets (folder)
images (folder)
section_1 (folder)
image.png (file)
in my css, because my css files are inside the stylesheets folder, I call my urls as follows:
background-image:url("../images/section_1/image.png");
As for my views, it is basically one view which renders out each section (partial).
Try background-image:url("section_1/image.png");
This works in my rails project. However, I'm using compass, so it might be different.
I know what the problem is. But I still have one more problem.
The solution.
When calling an image from anywhere, even if you have a sub directory like I have, you simply call the url as follows:
background-image:url("assets/header/header_bg.png")
So you basically leave out the images folder for some reason.
The problem I still have is a routing issue.
In my assets folder I have a folder named fonts.
Inside this folder I have a number of folders, with different fonts in each folder (.eof,.ttf.svg) the usual font files.
When I type in the exact url of where these files are stored I get a routing error.
I also have a file called fonts.css in my stylesheet folder.
In the url if i put localhost:3000/assets/fonts which is the folder of the fonts I get a routing error.
Is there anyway in the routes file can I route the application correctly?
Both for the images and for the fonts?