I am pretty new to angular and the like. I am trying to link the font-awesome stylesheet, and I was to reference the path to the css folder of the font-awesome installation. I have used npm to install font-awesome, and when I reference font-awesome, I don't want to link to a website, I want to use the path that it is installed to.
The problem comes when I try to make the path more universal. If I have font-awesome installed to the repo that I am using, and I want anyone who uses the app to be able to see these icons, how can I write the path so that I don't put my own directories before the repo in the path?
For example, If the folder I am trying to link is at path C:/Users/Me/path/to/folder/font-awesome/css, how can I write this path so that anyone who uses the app can use the same path that will find the same folder in their system?
1.keep complete font-awesome folder in assets folder.
go to angular.json
in styles array give path of /fontawesome/css/all.min.css
Related
I want to implement bootstrap-icons in an angular project but it is not working. I ran the following command,
npm i bootstrap-icons
But I am unable to add icons in the web page with icon fonts.
For now, I have added the bootstrap icon CDN in index.html file and it is working.
I want to know if we need to add the path for bootstrap icon file anywhere in the angular.jason file or it should work after the install command.
Your answers are appreciated!!!
Thank you.
First, run npm i bootstrap-icons --save
then in the angular.json file
Add the path to the "Styles" key value like this,
"styles": ["node_modules/bootstrap-icons/font/bootstrap-icons.css",]
Installing a package to your project via npm just downloads the package files to node_modules. You would have to configure your project to import the necessary files in order to utilise the package.
In this case, since it is a icons library, you probably have a stylesheet which you already pointed out works via CDN inclusion in the html file.
In angular, try importing the bootstrap-icons.css file into your styles.css file. You would need to check where the bootstrap-icons folder is in node_modules and find the css file within the folder structure.
From my local install, I identify the location to be: node_modules/bootstrap-icons/font/bootstrap-icons.css
In your styles.css file, add the import statement:
#import '~bootstrap-icons/font/bootstrap-icons.css';
This should get your icons working. If not, ensure the bootstrap-icons.css file path is correct and accessible.
Attaching a working example (hosted on stackblitz):
https://stackblitz.com/edit/angular-bootstrap-icons?file=src%2Fstyles.css,src%2Fapp%2Fapp.component.html
I too was facing the issue. After importing the icon CSS file at style.css it is working perfectly
First install bootstrap icons with npm:
npm i bootstrap-icons --save
Then go to your angular.json file and add this to your styles:
"styles": [
"src/styles.scss",
"node_modules/bootstrap-icons/font/bootstrap-icons.css"
],
Now you can use whatever icon you want.
ex.:
<i class="bi bi-bootstrap-fill"></i>
If you don't want to use npm to use bootstrap icons, you might look at: https://icons.getbootstrap.com/#install
I have an Angular Application with the following structure:
Structure
As you can see, there is a backend directory (yellow marked) in which other directories exist, such that the following path is valid: backend/uploads/users/user123/unnamed.jpg.
Now I want to use that image in my app.component.html
<img src="">
I tried to put the path in the src-property in different ways but the image is not appearing. How would the src has to look like to use that image in my Angular project?
I guess you are using the angular CLI. Therefore you should put the image in the assets folder. Try again than and it will work.
Like this:
<img src="/assets/images/unnamed.jpg">
EDIT: I am sorry, did miss out that part. You need to edit the angular.json file for this. Add the path of the backup folder there to the assets. But the backup folder must be in the src folder for this to work. Thats my suggestion for a solution.
So you will be adding "src/backup"
I don't think what you want to do is actually feasible. if you want to use an image in an Angular app, it's either an asset and you put it in the assets folder, or it's a resource coming from your backend and you will have to write a proper mechanism to expose the wanted resource, and then use it in your Angular app.
I am working on an Electron project and using Electron-packager to package my app.
However, with my current folder structure, all CSS files located in the parent folder of my Electron project/package.json are not being copied to the packaged application.
This is my structure:
- GUI
--- CSS
- Apps
---Demo
------package.json, etc
---Demo2
------package.json, etc
---Demo3
------package.json, etc
I build apps while inside Demox folder. Problem is I can't move GUI folder to inside Demo/Demo2/Demo3 since it will contain just the same files and it would be redundant.
However, electron-packager does not support packaging of files from outside the actual Demox folder.
It was suggested that I move these CSS files to node_modules instead.
But how do I require these CSS files from the node_modules folder to an html file? Is there any other way WITHOUT using webpack? I'm hoping to keep this simple and stay away from setting webpack up unless I have no other choice.
For reference, here is the question I posted on the Electron-packager github:
https://github.com/electron/electron-packager/issues/1089
Thanks!
Was able to come up with a solution now.
Since I have moved node_modules folder to the very root (C:\node_modules, so it can be used by all node projects residing in C: drive), I just used an absolute path and link from there:
<link rel="stylesheet" href="/node_modules/sample-css/button.css">
Works well for my needs.
Thanks everyone.
I've been trying to resolve this issue with my website (www.wintonbrownmusic.online). I've attached a picture of how my site looks locally. When I upload it through GoDaddy, the site looks differently. I understand that others have had this issue but not sure where/how to change the CSS file to link to my website so it'll look the way that it should. Can someone assist?
I'm not sure what your hosting / creating it with, but I had a quick look at your site and found one issue.
Your HTML file is looking for the bootstrap.css file in the assets/css folder, but it appears to be in the root folder.
unless your hosting with something that is supposed to find it there.
not sure.
but when is use http://www.wintonbrownmusic.online/assets/css/bootstrap.css is doesn't work, but if I use http://www.wintonbrownmusic.online/bootstrap.css it does work.
hope that helps.
You have problems with path, If you open the console in inspect element it will show you that you have problems in calling the required files css, js, and other files.
You need to upload folders properly in the host, you need to add folders like you have in local folders in your computers. "assets" folder is missing and you just upload files inside there.
change your folder name as either assets or css ....
assets/css is a folder name because of the slash (/) browser looking for css folder inside assets folder...just give the folder
name correctly try to avoid usage of special character ,punctutation
in folder name
This is the effect with font awesome, i only can get it when i using font awesome 4.1 CDN)
Using downloaded files, I included the fonts folder and font-awesome.css, but still no icon appear.
My link which is correct.
The font-awesome.css file path, i didn't change anything.
directory folders and files.
inside of font folder.
inside css folder.
********************************************************
I still didnt manage to get the icon show up, why??
Download the fontawesome package from their website.
Extract the package where you will find the fontawesome.css file.
Copy this file to your css directory
copy all the fonts files from the extracted fontawesome package to your fonts folder.
Finally add the fontawesome.css to your html page by giving respective location of the css file.
AND Voila !
Since I am using FontAwesome V5.3.1, I would like to update this answer since the folder structure was changed a bit in this version.
First, download the FontAwesome v5.3.1 and extract the folder.
Copy the all.min.css file from the CSS folder and add it in your stylesheets.
Now, Copy the webfonts folder from FontAwesome extract and place it into your project one directory above to your all.min.css file. (Refer the image below)
Since all.min.css file refers to the webfonts folder now, we need to add this file along with the webfonts folder.
src: url("../webfonts/fa-brands-400.eot"); // This is how it is been referred now in all.min.css file.
Thank you.
Just Downloading Css and linking to the file will not make sense,You should look into the css file....
You havent Downloaded the fonts folder in which all fonts styles are stored...
So Download it and give path to the font files located on your system ,
I have shown the links in boxes which you need to add links in font-awesome css files..
Download fonts from the cdn links and store in fonts folder..
Hope this will work for you..
You may find that the developer options in your favorite browser will give you an idea why the file is not working.
Font awesome requires the font files which come with it. The CSS file will reference these and try to include them, but currently won't be able to find them.
Download font-awesome-4.1.0.zip from FontAwesome
Then extract this and put the css and fonts folders into your project. You can then reference the file as:
<link href="css/font-awesome.min.css" rel="stylesheet">
Go to network console, turn font filter ON
See which files are downloaded in background
Right click and open in new tab.. it will download that file
Put them in root DIR of your server storage
For eg. htdocs/webfonts/fa-solid900.woff2
Final download all.css file and link to your head section
Welcome in advance :)
Search for the required file using developer tools
Download file locally
Also download all.css or whatever cdn you are using
Putting downloaded font files in this webfonts/ folder
Download fontawesome (font-awesome-4.7.0) : http://fontawesome.io/get-started/
Unzip and copy into your project as-is.
In HTML reference font-awesome.min.css e.g: <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
this link is so helpful.
and work for me.
go to Font Awesome.com and download font awesome for the web.
extract this file.
put the webfonts file from the font awesome (download file) to your project file. (Delete the rest of the folder :) )
make new txt and copy the all.css file to it. (name it font.css and put it to the css folder).
add <link rel="stylesheet" href="css/fonts.css"
Download "font awesome" for Web from this link https://fontawesome.com/download, extract the folder, and add a reference to the all.css file inside index.html
It is important to ensure relative links to eot & woff files other than css, in case you are using .htaccess
1) extract downloaded zip file to desired directory
in case .htaccess path is
H:\virtualhost\ .htaccess
and fontawesome css and fonts path is
H:\virtualhost\fontawesome-free-5.4.2-web\css
H:\virtualhost\fontawesome-free-5.4.2-web\webfonts
2) Make following entries in .htaccess
RewriteRule ^css/([^/]*).css$ /fontawesome-free-5.4.2-web/css/$1.css [L]
RewriteRule ^webfonts/([^/]*).eot$ /fontawesome-free-5.4.2-web/webfonts/$1.eot [L]
RewriteRule ^webfonts/([^/]*).woff2$ /fontawesome-free-5.4.2-web/webfonts/$1.woff2 [L]
RewriteRule ^webfonts/([^/]*).woff$ /fontawesome-free-5.4.2-web/webfonts/$1.woff [L]
3) Add following in head part of html
http://local-ip-address:port/css/all.css