I have a simple flask application. It has flask-bootstrap installed and so I can access some CSS classes from there and my own style sheet in my static folder. However, I want to be able to add another stylesheet from a CDN in my index.html file.
I usually do something like place the following inside head tags.:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Is this possible? I don't think that using the
{{url_for('static' )}}
syntax would work here and I haven't found anything online that's describing what i'm doing (or I couldn't tell).
Yes, this is how I do it too. And then I link to my own stylesheet after the Bootstrap CDN.
Edit: and if you use a base template that is being extended by multiple templates for sub pages you can put the head tag in the base template so it precedes all templates.
Related
I have a fairly basic Dojo 7 (Dojo 2) app built with the dojo-cli tool. Now I'd like to add FontAwesome icons to it. I have a Pro subscription so I have a zip file with various folders of css and web font files that I want to include in my project, then link to from index.html. I believe the Dojo build process uses webpack, and my knowledge of it is extremely limited.
I can link to fontawesome CDN free version in src/index.html easily, which works fine:
<!link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
The Dojo 2 tutorial at https://dojo.io/learn/building/static-assets says I can put static assets in the assets folder, so I extract the zipfile to assets/fontawesome-pro-5.15.3-web and try to link to it in src/index.html:
<link rel="stylesheet" href="assets/fontawesome-pro-5.15.3-web/css/all.min.css">
My intention is to use FontAwesome in the traditional way, not using CSS Modules.
<i class="fas fa-question-mark"></i>
The dojo build process emits a large amount of "copying file blah.css" as it copies assets content to output/dev/assets and I see the FontAwesome files in output/dev/assets/fontawesome-pro-5.15.3-web, however the build gives:
Html Webpack Plugin:
Error: Child compilation failed:
Module not found: Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' i n '/home/username/go/projectname/src':
Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' in '/home/username/go/projectname/src'
- compiler.js:79
[travesty]/[html-webpack-plugin]/lib/compiler.js:79:16
I notice that it's referencing relative to /home/username/go/projectname/src, and the original assets folder is one level above that in the source tree, so I also tried this relative path in src/index.html:
<link rel="stylesheet" href="../assets/fontawesome-pro-5.15.3-web/css/all.min.css">
But this fails differently:
Html Webpack Plugin:
Error: /home/username/go/projectname/src/index.html:97
module.exports = __webpack_public_path__ + "all.min.30RjDni8.css";
^
ReferenceError: __webpack_public_path__ is not defined
- index.html:97 Object../assets/fontawesome-pro-5.15.3-web/css/all.min.css
/home/username/go/projectname/src/index.html:97:18
I have very similar results creating an assets/simple.css file and linking to that with <link rel="stylesheet" href="assets/simple.css"> so this seems a generic problem with my understanding of webpack.
Should I be using the "static assets" approach with these FontAwesome files, and if so how do I fix this build situation, or should I be trying to use this third party CSS library as a CSS Module, and if so, how?
It may be to do with webpack's "publicPath" concept, see https://webpack.js.org/guides/public-path/ .. if so I'd presume I need to do something to my .dojorc to control the Dojo build's use of webpack.
Thanks to #agubler on the Dojo discord channel, the fix is apprently this simple:
<link rel="stylesheet" href="/assets/fontawesome-pro-5.15.3-web/css/all.min.css">
Builds and works fine. Feels dirty to use an absolute URL like that so if anyone has a more meaty, explanatory answer to give, I'd be happy to mark that as the Answer instead of this :)
I have installed font-awesome 4.7 in my nodejs application
I have to get it in my views.ejs file.
i tried importing using tag...
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" >
and from css file like this...
#import url('../node_modules/font-awesome/css/font-awesome.min.css');
but they doesn't help....
It is failing to load when looking at the browser's network tab...
Please help.. Thanks in advance!
I have an ejs app in production that uses font awesome and I just use the CDN. But also Atheesh Thirumalairajan post is a valid way. Just make sure you are serving from a public folder.
<script src="https://kit.fontawesome.com/c03ec31dc2.js" crossorigin="anonymous"></script>
You need not use node_modules instead, the easy way of doing it is to download Font Awesome from https://fontawesome.com/v4.7.0/get-started/
Then, extract the files your public folder (You need to define the public directory in express)
Then, In the <head></head> section of your HTML, add:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
You can also checkout their official examples.
The same thing applies to Font Awesome 5 But, you need to download from https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
I have trouble to make my Css and Javascript working. Here is a capture of my current work. I have created a folder with my different html pages and same for Css and js (i only have one css for everything and several js).
It worked when all my htmls, Css and Js are into the main folder but when it comes to organize into severel foldes, nothing is working except my Htmls.
enter image description here
Thank you very much.
Try this out
<link rel="stylesheet" href="/css/style.css">
Try this for the CSS
<link rel="stylesheet" href="../css/style.css">
All your files are in different directories and if you have to link your HTMLs with the CSS and JS files, you have to get out of the HTMLs directory to the parent directory. And, then specify the path to the CSS, JS, and Images.
Use this to reach the parent directory of the current directory.
../
I see you are using Visual Studio Code, there is a trick for call CSS and Javascript
#Styles.Render("~/css/style.css")
#Styles.Render("~/css/yourstyle.css")
and is a good practice to separate css from javascript folder
#Scripts.Render("~/Scripts/yourscript.js")
We use ScrewTurn Wiki and I created a Wiki page that contains the CSS information. I used:
<head>
<link rel="stylesheet" type="text/css" href="http://wiki.ourcompany.net/tech.CSS-Master.ashx">
</head>
as the link in all the other Wiki pages as the reference for the CSS info, where Tech is the namespace and CSS-Master is the Wiki page containing the CSS info.
This worked fine for a while, then suddenly it just stopped working. Any suggestions?
Are you trying to apply this CSS across your whole wiki? There's actually a lot you can do with theming. In the main directory on your webserver, there's a 'Themes' subdirectory, where you can make a new folder for a theme, then you can select a theme in the Administration->Configuration page, as well as when you're editing a namespace (if you want to change the theme for a particular namespace).
An interesting problem but maybe it has already been solved. I have a collection of CSS style sheets that apply to multiple domains. The way it has been architected, both domains share the same CSS files and add their own definitions and rules to the stylesheets. Our system is as such that anytime a developer makes a change to a CSS file that belongs to a particular domain, then that very same change needs to be done in another domain's style sheet as well.
For instance if I have two domains: Main, SubMain. BOth of these share a stylesheet called global.css and a developer working on the SubMain domain changes this stylesheet by adding a new rule. To ensure that things do not break in the Main domain, the developer needs to go ahead and add the same rule to global.css to the main domain's global.css stylesheet.
Why this does not have the same shared location is beyond me since this is a shared engineering project. My understanding is that the reason being that the changes were to be applied immediately and unfortunately the only option was to use the same stylesheet + directory structure across all the domains.
But this problem does exist and it is tremendous overhead. Is there anyway to extend CSS stylesheets such that domain specific CSS can be added to the extended stylesheets.
If not, what other solutions can be proposed ?
If you have the same code in two places, why have two files (and this goes for coding as well - methods or variables or whatever)? If you use something more than, keep it in one place and reference to it everywhere else.
What you need to do is to have the Main website point at a local copy of the CSS file (like so):
<link rel=stylesheet type=text/css href="/global.css">
... and then on the SubMain website, include in your headers a link to the Main website's CSS file (like so):
<link rel=stylesheet type=text/css href="http://mainwebsite.com/css/global.css">
To solve your problem, only have the editable CSS file/files on one domain (the Main one), and then link to them using absolute URLs in the other (SubMain) website.
I dont understand you. I dont know where your problem is. Do you want to add 2 css style sheets?
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="style2.css" type="text/css" rel="stylesheet" />
Or do you want that 2 domains using 1 style sheet?
<link href="http://url.com/style.css" type="text/css" rel="stylesheet" />
Both of the domains can use this. You are not linking in the directory of the style sheet. You put the link of your style in it. This will solve your problem.
Both domains can use one CSS file.
<link rel="stylesheet" type="text/css" href="http://myotherdomain.com/css/global.css">
Just link to one CSS file.
Or if you really want to "sync" them you could create a rsync script but that doesn't make sense.
It's apparent that you know you can include stylesheets across domains:
<link rel=stylesheet type=text/css href="http://example.com/global.css">
But did you know that you can include multiple stylesheets? Create a single stylesheet that has all of the "master" styles and put it in global.css on one of the domains (your choice). The styles unique to each domain can be in a stylesheet specific to that domain.
<link rel=stylesheet type=text/css href="http://example.com/css/global.css">
<link rel=stylesheet type=text/css href="/css/specific.css">