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
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 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.
I'm working on a Wordpress theme and I have downloaded the Compiled CSS and JS files from getbootstrap official website.
I have moved all the files to my Theme directory, more specifically to /bootstrap/css and bootstrap/js accordingly.
When I call the file in my header.php, nothing happens. But if I use Bootstrap CDN the test website works. The solution might be obvious, but I'm simply not seeing it.
in header.php
<html>
<head>
<meta charset="utf-8" />
<link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”bootstrap/js/bootstrap.min.js”></script>
Edit: Yes, the files bootstrap.min.css is located in bootstrap/css folder.
First, you should not include hardcoded styles, try enqueueing in the functions.phpfile as the documentation states:
wp_enqueue_style
Second, the reason why the loading works with the CDN is because it's finding the source directly from the repository. This tells us that the path of your style is not right. Be sure that the theme structure be like this:
ThemeName/bootstrap/css/
Last as #Chris G said, you should use the get_stylesheet_directory_uri() function to get the file's relative path.
I'm new in Angular and I have created an Angular 2 application using Visual Studio 2017 Angular Spa template.
I want to add Angular Material to my project and in its guide said that I have to add this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
But I don't know where.
I have add it inside app.component.css file:
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
But I get a warning:
(CssLint) #import prevents parallel downloads, use instead.
I have found this answer, but I don't think it applies to my problem.
Where can I add styles or fonts to use them globally?
Since you're new to Angular, I can only advise you to follow their guidelines.
And one of their guidelines is to create a project using the Angular CLI.
Once you've created the project, if you want to add Angular Material, follow their guide too.
About your font issue : you're not trying to import a style, you're trying to import a font. Fonts goes in the index.html page, in the head. #Gregor placed it well.
In your Angular project folder you should got to src/app/. In the app-folder you can see index.html and styles.css. So this two files are global. You can add font styles in index.html od via #import in styles.css.
In case of your question you should have an index.html in your wwwroot folder. In this example the author does so.
For example index.html:
<html>
<head>
....
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>
Answer that you posted actually applies to you, but firstly you should download this font and copy it to your project dir so it can be static asset. Then you can import this file using webpack plugin (look here). I'm not familiar with project generated by Visual Studio you can just simply add your link tag to index.html inside head tag.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
...
</html>
Only add our CSS files to the nonTreeShakableModules array of the webpack.config.vendor.js, e.g. my webpack.config.vendor is like
const nonTreeShakableModules = [
'bootstrap-css-only/css/bootstrap.css',
'font-awesome/css/font-awesome.css',
'es6-promise',
'es6-shim',
'event-source-polyfill'
];
That's because of you have (in the same webpack.config.vendor)
const clientBundleConfig = merge(sharedConfig, {
entry: {
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
}
In case of a font I don't know if the best solucion it's simply add a link in _layout.cshtml as #Gregorg say
I am building Semantic UI with Gulp using this guide
However, the problem is now that the icons are not showing. So if I use
<i class="facebook icon"></i>, nothing shows up.
I guess I haven't built the icon font or something like that.
Is it necessary to load Font Awesome or something like that myself? I have read through the Semantic UI documentation, but I cannot find anywhere stating that I have to do anything to enable icons.
You need to include the font assets which are located in themes/default/assets/fonts/
The themes folder must be in the same directory as your semantic.css file.
The fonts are imported externally from the semantic.css file from within the themes directory.
To obtain this directory, download the zip for semantic ui and look inside the dist folder.
I was having the same issue, use this link tag in the head of your html and you're good to go :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Got this from their official website.
Since it's not marked as ansered yet in 2019... Here's the clear answer. The above answers are correct as well, just not straight forward.
So basically what you missed out is the inclusion of the icons themselves. When you download semantic-ui it comes with themes folder within the "dist" folder. what you must do is copy that themes folder and paste it in your project folder where your semantic-ui.css is located. and it will work.
Please remember to mark the question as answered.
I had an CORS-issue (causing square empty icons) with the Semantic UI Icons when loading the minified CSS from a CDN. Turns out that it was my location override that caused it, turning it off made the icons display properly.
I fixed the problem replacing this line
<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
with this
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.7/dist/semantic.min.css">
I also had to add link to icon.min.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/components/icon.min.css">
I wrote a post about it on medium :)
In my case I forgot to import the semantic ui css file. Import it in the App.js ( as it is the top level file ) or anywhere inside your project.
import 'semantic-ui-css/semantic.min.css'
I had the same problem and I solve it adding the following lines on my webpack.mix.js
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff','public/css/themes/default/assets/fonts/icons.woff')
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2','public/css/themes/default/assets/fonts/icons.woff2')
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.ttf','public/css/themes/default/assets/fonts/icons.ttf')
and then executing the command
npm run dev
This add in my case the missing files I need
In the semantic.css file, you'll find this line:
background: url("./themes/.....")
so, what you have to do is to copy the themes folder with all its contents beside your semantic.min.css
All simply copy the folder Semantic-UI-CSS-master with all its contents to your public/static/wwww folder, and will get things working smoothly.
I partially fixed this by downloading icon.min.css from this link and then replacing the CDN link with this two lines:
<link rel="stylesheet" href="~/Content/icon.min.css" />
<link rel="stylesheet" href="~/Content/semantic.min.css"/>
There are still some icons missing: all the outlined ones.
You could also try the fonts folder from this branch but it did not work for me.
So as the other answers have provided you can change the script to look like:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Stop the server and close your browser. If you do not fully close the browser the error will persist. Restart your server.
If this does not resolve your issue, you can also choose to install the CSS library locally via
npm install semantic-ui-css
Then, import the library into your root index.js component,
import "semantic-ui-css/semantic.min.css";
I was having the same problems using react
tried everything mentioned and nothing worked
then just replaced this link
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" />
hope that helps